Форум

Heidel · #1 (**permalink**) 25.07.2012, 23:10

Для выравнивания блоков по высоте есть jQuery плагины, интересует, если что что-то подобное для выравнивания блоков/элементов по ширине.

На несколько страниц из галереи выводятся изображения, они имеют разную ширину. Число изображений в ряду и число рядов не фиксировано.
То есть сейчас выводится как на первой картинке, а нужно, чтобы было как на второй.

Пока нашла что-то вроде ссылка, но там отвалилось демо, так что пока еще не совсем понятно, какой будет итоговый результат.
Но может кто еще чего встречал/использовал в своей практике?

Deff · #2 (**permalink**) 25.07.2012, 23:16

Heidel,
Судя по тому, что нарисовано справо - это таблица с центрированием по левому краю

Heidel · #3 (**permalink**) 25.07.2012, 23:28

Да, можно, наверное, и таблицей вывести, но для того, чтобы после каждых, допустим, четырех элементов img, которые я положу в ячейку таблицы <td></td>, выводился закрывающий тег </tr> и открывалась новая строка <tr> мне, я так понимаю, все равно потребуется скрипт. Где можно посмотреть что-то подобное?

Deff · #4 (**permalink**) 25.07.2012, 23:50

Сообщение от Heidel

Да, можно, наверное, и таблицей вывести, но для того, чтобы после каждых, допустим, четырех элементов img, которые я положу в ячейку таблицы <td></td>, выводился закрывающий тег </tr> и открывалась новая строка <tr> мне, я так понимаю, все равно потребуется скрипт. Где можно посмотреть что-то подобное?

Ни наю - чо нидь типо так

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#Table-wrap td{
 border:1px solid blue;
 width:40px;
}
</style>
</head>
<body>

<div id=Table-wrap></div>
  <script>
function setTable(a,b){
  var i=0,j=0,str="";
  var S="", TDst='<td>'
  var Tde='</td>\n',Ntd;

  for(j=0; j<a; j++){
    var str='\n<tr>\n'+str;
    for (i=0; i<b; i++){ Ntd=b*j+i;str+=TDst+(Ntd+1)+Tde; }
    str+="</tr>\n";S+=str;str="";
  }
    str='<table><tbody>'+S+'</tbody></table>';
    return str;
}
var TabL=setTable(7,7);
document.getElementById('Table-wrap').innerHTML=TabL
  </script>

</body>
</html>

devote · #5 (**permalink**) 26.07.2012, 00:16

IE 8+

<style>
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid #000;
        height: 200px;
    }
</style>
<div class="row">
    <div class="cell">11111111111111111</div>
    <div class="cell">22222222222222222</div>
    <div class="cell">33333333333333333</div>
    <div class="cell">44444444444444444</div>
    <div class="cell">55555555555555555</div>
    <div class="cell">66666666666666666</div>
    <div class="cell">77777777777777777</div>
</div>

Форум

Справочник

Discord чат

Курсы javascript