css - HTML / CSS - 将 div 放置在彼此的下一个和下方

Question

我有一个问题，我希望有人可以帮助我。我想要的是这样的：

[lorem] [lorem
         ipsum
[other]  bla
         bla]

所以这是 3 个 div，它们是下一个并且在彼此之下，我所拥有的是：

[lorem] [lorem
         ipsum
         bla
         bla]

[other]

因此，当 div 结束时，另一个 div 位于 div 的下方，而不是 div 的旁边。

我的代码：

<div> Lorem </div>
<div> lorem ipsum bla bla </div>
<div> other </div>

div { float: left; }

这可能吗？谢谢！

Answer 1

你可能想要这个...

<div class="abc">
    <div> Lorem </div>
    <div> other </div>
</div>
<div class="abc"> lorem ipsum bla bla </div>


.abc { float: left; margin-right:20px;}

Answer 2

如果我理解正确，您希望所有三个 div 连续内联。如果这就是你想要的，那么你也应该给你的 div 提供宽度。

例如，如果您的父容器是 600px 宽，那么您的浮动 div 必须具有 200px 宽度（200px X 3 divs = 600px）。

这样，您可以确保它们排成一排。