Question

您好，并提前致谢，请记住我是初学者：）

我想练习定位div，所以我写了一些我读过的书。每个div由一个作家和他的书组成。

现在看起来像这样：http://i.stack.imgur.com/gNZZF.png

我用漂浮物：左;对于所有div，所以它们按字母顺序从左到右排序，直到使用全宽，然后从上到下。我用的是高度，宽度：自动; ，这导致'加缪'div更大，因为它列出了三本书。问题是，因为加缪的高度较大，div下方行中的div不是位于页面的左侧，而是位于加缪的侧面。正如你所看到的，我增加了利润，但这并没有解决问题。我应该如何解决这个问题，以便每一行都像第一行或最后一行？

由于

Answer 1

如果容器的高度不相同，我认为float: left无法找到你要找的东西。给所有div设置相同的高度，它应该可以正常工作。

Answer 2

看看http://css-tricks.com/fluid-width-equal-height-columns/。如果这不是你正在寻找的东西，你可能无法用css做到这一点。这是一个javascript解决方案：http://css-tricks.com/equal-height-blocks-in-rows/

Answer 3

一种方法是将每个容器放在另一个容器中，并将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>

Answer 4

浮动节点时，将其从文档流中删除。因此，不同高度的节点将倾向于包裹＆＃34;这样的非线性方式。我认为实际上只有两种方法可以做到这一点......要想找到一种方法来包装东西或使它们具有相同的高度。

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

4 个答案: