Html 用不同高度包装一长排桌子

我正在图像下包装一个图像标题。有许多对这样的图像和标题

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

。我将表格向左浮动，使每一行靠着屏幕的一侧排列。其中一个箱子被卡住，因为它左边的箱子的高度比其他箱子的高

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

它看起来应该是这样的，只是能够适应不同的标题高度，而不需要明确的全局高度

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

将.book div设置为恒定高度，但这不适合高标题 使用flexbox，这很有效，但我正在寻找更简单的方法。 补充明确：两者皆有；给你上课

像这样：

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

---

我添加了一个容器和一个新类，请参见working

---

啊，我不想让每本书都排在一行，我只想让它们卷到屏幕的一侧。我试着让这些盒子在到达屏幕右侧时自动卷到下一行。每行应从屏幕左侧开始。

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

.clear{clear:both;}