Динамическая сетка, сделайте флюидные коробки одинаковой высоты

Question

Я пытаюсь создать динамическую сетку, которая содержит плитки - есть одна строка, а столбцы сетки имеют ширину%.

При больших разрешениях ширина может составлять 30%, но при более низких разрешениях она может составлять 50% или даже 100% - все они плавают влево, и это отлично работает для ширины.

Дело в том, когда один из столбцов имеет больше содержания, чем другие, следовательно, является более высоким, и это портит систему сетки и пользователь может в конечном итоге с 3 строки, то строка 1, то строка 2.

Я не могу использовать min/max height в CSS, поскольку, в зависимости от пользователя, div может иметь 10 слов или 1000 слов. «Строка» на самом деле является оберткой div, так как она включает несколько «строк», поэтому установка высоты на этом тоже не работает.

Как создать динамическую гибкую сетку флюида, используя что-то вроде ниже, где все ширины одинаковы, а все высоты такие же, как и в самом высоком поле. Я не против использования JS/jQuery, если это необходимо, Я подозреваю, что так будет.

<div id="row"> 
    <div class="col">COL1</div> 
    <div class="col">COL2 Text added to this column so height is different</div> 
    <div class="col">COL3</div> 
    <div class="col">COL4</div> 
    <div class="col">COL5</div> 
    <div class="col">COL6</div> 
</div> 

#row { 
    float:left; 
    border:1px solid red; 
} 

.col { float:left; 
width:30%; border:1px solid black; margin:1%;} 

@media screen and (max-width: 400px) { 
    .col {width:45%;} 
} 

http://jsfiddle.net/8bnqbpnr/

Answer 1

Вы можете исправить это с помощью flexbox. Я очень увлекаюсь самой flexbox :) Просто помните, если ваша целевая аудитория будет использовать IE8 или старше, что вы не можете использовать это.

HTML

<div class="row"> 
    <div class="col">COL1</div> 
    <div class="col">COL2 Text added to this column so height is different</div> 
    <div class="col">COL3</div> 
    <div class="col">COL4</div> 
    <div class="col">COL5</div> 
    <div class="col">COL6</div> 
</div> 

CSS

.row { 
    border: 1px solid red; 
    display: flex; 
    width: 400px; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 
.col { 
    box-sizing: border-box; 
    padding: 10px; 
    border: 1px solid black; 
    margin: 5px; 
    width: 30%; 
} 

или увидеть эту ручку: http://codepen.io/pjetr/pen/GJLwoP

Answer 2

Вы могли бы использовать: п-го ребенка псевдо-селектор, чтобы заставить ясно: слева на конкретных столбцов и медиа-запросов за отзывчивость: http://jsfiddle.net/mpartarrieu/109gjy37/

<div id="row"> 
    <div class="col">COL1</div> 
    <div class="col">COL2 Text added to this column so height is different</div> 
    <div class="col">COL3</div> 
    <div class="col">COL4</div> 
    <div class="col">COL5</div> 
    <div class="col">COL6</div> 
    <div class="col">COL7</div> 
    <div class="col">COL8</div> 
    <div class="col">COL9</div> 
    <div class="col">COL10</div> 
    <div class="col">COL11</div> 
    <div class="col">COL12</div> 
    <div class="col">COL13</div> 
</div> 

#row { 
    float:left; 
    border:1px solid red; 
} 

.col { float:left; 
width:30%; border:1px solid black; margin:1%;} 

@media screen and (min-width: 401px) { 
    #row .col:nth-child(3n+1) { 
     clear: left; 
    } 
} 

@media screen and (max-width: 400px) { 
    .col {width:45%;} 
    #row .col:nth-child(2n+1) { 
     clear: left; 
    } 

} 

Answer 3

Существует простое решение для этого, который работает даже для IE 6. Все, что вам нужно сделать, это заменить float: left до дисплей: встроенный блок. Вот jFiddle. Тем не менее, есть 2 вещи, говоря:

1. Сделать это работает для IE6дисплея: встроенный блок свойства работает только для встроенных элементов. Таким образом отображаются вместо ДИВА вы можете использовать поверочные элемент, если вы хотите поддерживать IE 6.

2. Удалить пробельный Поскольку ваши элементы теперь рядные, пробельного между вашей пядью-х ,Для того, чтобы удалить их и сохранить чистый код, который вы могли бы написать это так:

   <span class="col">COL1</spanasd><!-- remove whitespace --><span class="col">...</span>

Может быть интересно прочитать: Advantages of using display:inline-block vs float:left in CSS.