jquery - 动态网格，使流体盒等高

Question

我正在尝试创建一个包含图 block 的动态网格 - 有一行，网格列有一个％宽度。

在较大的分辨率下，宽度可能是 30%，但在较低的分辨率下，它可能是 50% 甚至 100% - 它们都向左浮动，这对于宽度来说效果很好。

问题是，当其中一列的内容比其他列多时，就会变得更高，这会扰乱网格系统，用户最终可能会得到第 3 行，然后是第 1 行，然后是第 2 行。

我无法在 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 或更早版本，则您不能使用此功能。

.container {
  width: 400px;
  margin: 32px auto;
}
.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%;
}

<div class="container">
  <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>
</div>