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

方法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; }

<强>解释

我使用了前两个div的类float-left，以便它们可以排成一行。然后我在最后一个div中添加了一个.clear类，这样我就可以把它放在一个单独的行中，在这个行中它没有任何物体左右浮动。

Demonstration 1.

方法2

使用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.

Answer 2

将float:left;用于float-left课程，clear: both;使用div

html：

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

css

.float-left {width: 50%; float: left;}
#bellow { clear: both;}

Answer 3

取决于您的float-left课程的实施。你需要一些清理才能在xx和yy下得到zz。

Answer 4

CSS

div div:first-child{
    float:left;

}

Answer 5

您似乎在float:left上使用DIV想要彼此相邻显示，这没关系，但您必须确保它们的宽度小于100％，所以它们适合。

试试这个：

<强> HTML ：

<div>
   <div class="inline-div">
      xx
   </div>
   <div class="inline-div">
      yy
   </div>
</div>
<div>
zz
</div>

<强> CSS

.inline-div {
    float:left;
    width:50%;
}

See the fiddle here

Answer 6

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

然后让你的css看起来像这样

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

Answer 7

这也适用于选择器和decleration的任意组合。将其添加到您的CSS：

.gutter-right {
    display: inline;
}

或

.float-left {
   display: inline-block;
}

如何在DIV中获取数据以显示在其他DIV下方

7 个答案:

方法1

方法2