0

我有以下 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 出现在下面？

4

7 回答 7

5

方法一

使用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; }

解释：

我使用了float-left前 2 个 div 的类，以便它们可以排成一行。然后我在最后一个 div 中添加一个类，.clear这样我就可以把它放在一个单独的行中，它不会有任何对象漂浮在它的左边或右边。

示范 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; }

解释：

我.inline在前 2 个 div 中添加了一个类，并将样式应用display: inline到这个类，所以这两个第一个 div 将内联显示，然后你不需要clear:both最后一个 div。

示范2。

于 2013-07-18T13:05:15.443 回答
2

用于类，并float:left;用于底部float-leftclear: 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;}
于 2013-07-18T13:06:42.377 回答
1

似乎您正在使用要彼此相邻显示float:left的DIVs，这没关系，但您必须确保它们的宽度组合小于 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%;
}

在这里看小提琴

于 2013-07-18T13:09:29.880 回答
1

取决于你的float-left类的实现。您需要进行一些清理才能在 xx 和 yy 下获得 zz。

于 2013-07-18T13:05:22.933 回答
1

CSS

div div:first-child{
    float:left;

}
于 2013-07-18T13:06:17.263 回答
0 
<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; }
于 2013-07-18T13:06:38.200 回答
0

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

.gutter-right {
    display: inline;
}

或者

.float-left {
   display: inline-block;
}
于 2013-07-18T13:11:05.440 回答