包裹不同高度的长桌子

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;
}

Answer 2

我添加了一个容器和一个新类，请参阅 FIDDLE

.clear{clear:both;}