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＆amp; category C包装不正确您可以看到它们将自己与上一行中的某个类别div对齐。在此示例中，category 5与上一行中的第二个div对齐，而category C与第三个div对齐。

我想这可能是一个小修复，与CSS有点奇怪，但我无法弄明白。非常感谢任何帮助！

Answer 1

看一下这个例子：

http://jsfiddle.net/x6fkm411/

如果元素没有相同的高度，我会演示float: left的行为。它与您说明的行为相同。因此，请检查元素的实际高度

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

修改

要实现我认为您希望实现的目标，请尝试使用hack：http://jsfiddle.net/12vj3y5g/1/或弹性布局https://css-tricks.com/snippets/css/a-guide-to-flexbox/

display: inline-block

EDIT2

当高度差仅为1px时，浮点问题甚至适用见http://jsfiddle.net/gtkp82pf/

Answer 2

我就是这样做的（代码中的注释有助于解释我的所作所为）：

.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的评论，一起删除表结构：

.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>

浮动的div没有正确包装

2 个答案:

修改

EDIT2