html - 如何让 DIV 中的数据显示在其他 DIV 下方

Question

我有以下 HTML:

<div>
   <div class="float-left gutter-right">
      xx
   </div>
   <div class="float-left gutter-right">
      yy
   </div>
</div>
<div>
zz
</div>

我想让 xx 和 yy 出现在彼此旁边，而 zz 出现在下面。但这不是正在发生的事情。

我怎样才能让 zz 出现在下面？

Answer 1

方法一

使用float: left + clear: both。

HTML:

<div>
    <div class="float-left gutter-right">xx</div>
    <div class="float-left gutter-right">yy</div>
</div>
<div class="clear">zz</div>

CSS:

div.float-left { float: left; }
div.clear { clear: both; }

解释:

我使用了前 2 个 div 的 float-left 类，这样它们就可以排成一行。然后我将 .clear 的类添加到最后一个 div，这样我就可以将它放在一个单独的行中，这样它的左边或右边都没有 float 的对象。

Demonstration 1.

---

方法二

使用display: inline。

HTML:

<div>
    <div class="float-left gutter-right inline">xx</div>
    <div class="float-left gutter-right inline">yy</div>
</div>
<div class="clear">zz</div>

CSS:

div.inline { display: inline; }

解释:

我在前两个 div 中添加了一个类 .inline 并将样式 display: inline 应用于此类，因此前两个 div 将内联显示，那么你不需要 clear:both 最后一个 div。

Demonstration 2.