Html 浮动功能无法正常工作，因为div大小不同

您好，提前谢谢，请记住我是这方面的初学者：）

我想练习定位div，所以我把我读的书做成了一个网格。每个部门由一名作家和他的书组成

现在看起来是这样的：

我用float：左；对于所有div，它们按字母顺序从左到右排序，直到使用全宽，然后从上到下排序。 我使用了高度、宽度：auto，这使得《加缪》的分类更大，因为它列出了三本书。 问题是，因为加缪的高度更大，所以div下一行中的div不是位于页面的左侧，而是位于加缪的侧面。正如你所见，我增加了利润，但这并没有解决问题。我应该如何解决这个问题，使每一行都像第一行或最后一行

---

谢谢

我认为如果容器的高度不完全相同，那么使用

float:left

是不可能的。

---

给所有的div设置相同的高度，它应该可以正常工作。

看一看。如果这不是您想要的，那么您可能无法仅使用css实现。这里有一个javascript解决方案：

一种方法是将每个容器放在另一个容器中，然后

float:left父容器，并为其指定定义的高度。然后，当前容器上使用的样式仍将用于使它们看起来与现在完全相同，只是它们将正确对齐

范例

CSS
.parent-container {
    float:left;
    height:200px /*or whatever height looks best for you*/
}
.current-container {
    /*current style you are already using here*/
}

HTML
<div class="parent-container">
    <div class="current-container">
        /* all the same content you already have*/
    </div>
</div>

CSS
.父容器{
浮动：左；
高度：200px/*或任何最适合您的高度*/
}
.现时货柜{
/*您已在此处使用的当前样式*/
}
HTML
/*所有内容都与您已有的内容相同*/
浮动节点时，将其从文档流中删除。因此，不同高度的节点将倾向于像这样以非线性方式“环绕”。我认为只有两种方法可以做到这一点。。。要么想办法把东西包起来，要么把它们放在同一高度。
请在问题中添加你的代码（HTML/CSS）