浮动 div 没有正确换行

Question

我有一个包含各种类别的产品表。在一个预告页面中，我展示了每个类别以及属于该类别的 2 到 5 张产品图片。

如果类别 div 由于宽度限制而无法放入同一行，我希望它们显示为使类别 div 浮动到左侧并环绕。我有以下用于相同的 CSS：

.prod-table
{
    display: table;
    float:left;
    border: 1px solid red;
    margin:5px;
    padding:5px;
}

.prod-cell
{
    display: table-cell;
    float:left;
    padding:5px;
}

.spread-image
{
    display: block;
    width: 100%;
    height: auto;   
    max-height: 200px;

}

HTML如下：

<div class='spread-table'> <-- this loops for categories
    <div class='spread-cell'> <-- this loops for image in categories
        <div style='position:relative;'>
        <img src="{{image.url}}" class='spread-image'>
        </div>
    </div>
    <div class='clearfix'></div>
    <div style='text-align:center'><strong>View More</strong></div>
</div>

这似乎可以正确浮动图像，但是有时我会遇到一种情况，即类别 div 换行到下一行，但不是从左端开始，而是在行中间的某个位置。像这样：

[---category 1---] [-category 2-] [----category 3----] [--category 4--]
                   [---category 5---] [-category 6-] [---category 7---]
[-----category 8----] [---category 9---] [-category A-] [---category B---]
                                         [-category C-] [-category D-] etc 

我添加了破折号来表示不同的类别有不同的宽度。在上面的布局中，您可以看到第一行和第三行正确换行，而第二行和第四行未正确换行。

当category 5 和category C 换行不正确时，您可以看到它们与上一行中的一个类别 div 对齐。在此示例中，category 5 与上一行中的第二个 div 对齐，category C 与第三个 div 对齐。

我想这可能是一个小修复，与 CSS 相关的一些奇怪的东西，但我无法弄清楚。非常感谢任何帮助！

Answer 1

看看这个例子：

http://jsfiddle.net/x6fkm411/

我演示了float: left 的行为，如果元素没有相同的高度。这与您说明的行为相同。所以检查元素的实际高度

您还将float:left 和display: table-cell 组合在一个CSS 规则中。显示将不适用，但会隐式设置为display: block。见这里：http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

编辑

要实现我认为您想要实现的目标，请尝试使用display: inline-block hack：http://jsfiddle.net/12vj3y5g/1/ 或 flex layout https://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑2

浮动问题甚至适用，当高度差只有 1 像素时
看这里http://jsfiddle.net/gtkp82pf/

Answer 2

这就是我的做法（代码中的 cmets 可以帮助解释我所做的事情）：

.table-wrap {
  display: inline-block;
  vertical-align:top;
}
.spread-table {
  display: table;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}
.spread-row {
  display: table-row;
}
.spread-cell {
  display: table-cell;
 /* remove float:left - you cannot have both float:left and display:table-cell*/
  padding: 5px;
}
.spread-image {
  display: block;
  height: auto;
  max-height: 200px;
  float: left;
  margin:10px;
}
strong.spread-cell {
  text-align: center
}

<div class='table-wrap'> <!-- instead of floating the table, make it inline-block so the wrap is natural and if the heights are out you won't get the stacking issue -->

  <div class='spread-table'>
      <!-- direct children of display-table should only either all be display:table-row or all be display:table-cell, if you have a mixture of block and table-cell it will ruin the layout (think of mixing tds with divs) -->

    <div class='spread-row'>
      <!-- this needs to be a row to get the view more below -->

      <div class='spread-cell'>
        <!-- you can't loop this cell as css has no such thing as colspan and as you have a row below with only one cell in, this row can only have one cell -->

        <img src="http://lorempixel.com/800/800/city/1/" class='spread-image'>
        <img src="http://lorempixel.com/800/800/city/2/" class='spread-image'>
        <img src="http://lorempixel.com/800/800/city/3/" class='spread-image'>
        <img src="http://lorempixel.com/800/800/city/4/" class='spread-image'>
        <!-- loop the image instead -->
      </div>
    </div>
    <div class='spread-row'><strong class='spread-cell'>View More</strong></div>
  </div>
</div>

编辑

按照 HerrSerker 的 cmets，一起删除表结构：

.category-wrap {
  display: inline-block;
  vertical-align:top;
}
.image-holder img {
  max-height: 200px;
}
.more {
  text-align: center;
}

<div class='category-wrap'>
  <div class='image-holder'>
    <img src="http://lorempixel.com/800/800/city/1/" class='spread-image'>
  </div>
  <div class='more'><strong>View More</strong></div>
</div>