Question

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

在较大的分辨率下，宽度可能为30％，但在较低的分辨率下可能为50％甚至100％ - 它们都是向左浮动的，这适用于宽度。

问题是当其中一列比其他列有更多内容因此更高并且它会弄乱网格系统并且用户可能最终得到3行然后是1行然后是2行。

我不能在CSS中使用最小/最大高度，因为根据用户的不同，div可能有10个单词或1000个单词。＆＃34;行＆＃34;实际上是一个包装div，它包含多个＆＃34;行＆＃34;所以设置一个高度也不起作用。

如何使用如下所示创建动态响应流体网格布局，其中所有宽度相同且所有高度与最高框相同 - 如果需要，我不介意使用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

您可以使用：nth-child伪选择器强制清除：在特定列和媒体查询上留下响应：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 2

您可以使用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>

Answer 3

有一个简单的解决方案，甚至可以用于IE 6.你需要做的就是将 float：left 替换为 display：inline-block 。这是一个jFiddle。但是，有两件事需要提及：

使其适用于IE6 display：inline-block 属性仅适用于内联元素。因此，如果您想支持IE 6，则可能需要使用 span 元素而不是 div 。
删除空格 由于您的元素现在是内联的，因此会显示 span＆＃39> 之间的空格。要删除它们并保留一个干净的代码，你可以这样写：

<span class="col">COL1</spanasd><span class="col">...</span>

也许有趣的是：Advantages of using display:inline-block vs float:left in CSS。

动态网格，使流体箱高度相同

3 个答案: