html - 包裹一长排不同高度的 table

Question

我将图片说明包装在图片下方。这些图片和说明有很多对。

<div class="book">
    <img alt="cover"><br>
    <div>
      <b>Title of Book</b><br>
      Some extra info, maybe.
    </div>
</div>

.book {
    display: table;
    float: left;
}
.book img {
    height: 300px;
}
.book div {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
}

JSFiddle .我将表格向左浮动，使每一行都靠在屏幕的一侧。其中一个盒子被卡住了，因为它左边的盒子高度比其他盒子高。

如何让每行框与屏幕左侧对齐？

它应该看起来像 this , 只是能够在没有明确的全局高度的情况下适应不同的字幕高度。

---

我将所有图像设置为恒定高度，但我不知道它们的宽度。也可能有一个很长的标题，所以我需要它来换行到图像宽度。我试过了

• 将 .book div 设置为恒定高度，但这不适应高标题 ( JSFiddle )
• 使用 flexbox，这很有效，但我正在寻找更简单的东西。

Answer 1

将clear:both;添加到你的书课

像这样:

.book {
    display: table;
    float: left;
    clear:both;
}