0

我有以下 HTML：

<div style="float:left; background-color:#0CC;">Floating Left</div>
<div style="background-color:#03C; color:#FFF;">Not floating</div>

在浏览器中显示如下：

浮动 div

如何使“不浮动”的 div 出现在浮动的下方？

4

5 回答 5

2

只需将clear: both;非浮动元素添加到您的 CSS 中：

<div style="background-color:#03C; color:#FFF; clear: both;">Not floating</div>

http://jsfiddle.net/Kyle_Sevenoaks/SnAc9/

于 2012-09-18T12:41:24.160 回答
1

你需要清除浮动

clear:left

因为感觉float:left是向左浮动到其余内容，直到您清除浮动。

如果我误解了您，并且您希望第二个 div 让它的内容被浮动 div 覆盖（“出现在浮动的下方”），您需要绝对定位而不是浮动 div。

此外，建议使用单独的 css-rules 而不是 inline-styles。

于 2012-09-18T12:40:45.890 回答
0

你的意思是你想让左边的div被插入？

http://jsfiddle.net/2xhGC/2/

HTML

<div class="inset">Inset div that is wrapped by the other content.</div>
<div class="article"><!-- start slipsum code -->

<h1>I gotta go</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non justo ante, at auctor odio. Phasellus suscipit facilisis ligula eu dignissim. Praesent eget odio nisi. Sed in hendrerit massa. Aliquam laoreet fermentum sapien, vitae placerat velit pellentesque vel. Aliquam lectus nibh, porttitor non laoreet eget, varius ac enim. Vestibulum feugiat metus rhoncus libero rhoncus commodo. Phasellus id auctor nisi. Sed hendrerit eleifend egestas. Praesent et tristique nunc. Aliquam id velit tortor.</p>

<h1>Uuummmm, this is a tasty burger!</h1>
<p>Nullam tempus mauris id velit lobortis varius. Mauris tempor aliquet diam, eu egestas augue ultricies id. In cursus ullamcorper velit quis viverra. Maecenas non nisi erat. In hac habitasse platea dictumst. Ut ipsum turpis, consequat sit amet aliquet a, rutrum at erat. Vestibulum auctor, risus quis elementum accumsan, elit sem ultrices est, ut interdum sem erat id leo. Aliquam adipiscing ultricies justo, sed facilisis ipsum congue eget. Duis sem elit, faucibus non aliquam eu, pulvinar nec elit.</p>

<h1>Uuummmm, this is a tasty burger!</h1>
<p>Suspendisse venenatis iaculis est in malesuada. Nunc sit amet arcu eleifend felis bibendum rhoncus eget eu ante. Maecenas molestie, purus eget bibendum rhoncus, ipsum orci lobortis enim, sit amet congue nisl urna vitae arcu. Nullam eget ipsum sapien, ac accumsan augue. Suspendisse consequat aliquet commodo. Morbi vel arcu non risus tristique fermentum. Morbi viverra nisl nec dui iaculis pretium. Morbi id viverra erat. Donec molestie euismod ipsum, id commodo purus lacinia at. Ut auctor turpis sit amet erat ullamcorper eu gravida neque iaculis. Sed augue purus, aliquam sit amet faucibus quis, dapibus vitae odio. Nulla mollis faucibus pharetra. Phasellus eleifend sodales nisi id suscipit.</p>

<h1>I can do that</h1>
<p>Curabitur ac sem metus, in ornare lacus. Duis auctor hendrerit viverra. Morbi posuere fermentum laoreet. Suspendisse potenti. Phasellus auctor lacinia tristique. Mauris interdum turpis et libero fringilla a consectetur ligula malesuada. Suspendisse urna neque, sagittis nec suscipit eleifend, imperdiet in arcu. Cras sit amet arcu metus. Curabitur cursus, justo sed tempor volutpat, felis justo dapibus risus, non porta sapien lectus tempor arcu. Nunc vel enim lectus, et iaculis urna.</p>

<!-- please do not remove this line -->

<div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a></div>

    <!-- end slipsum code --></div>

CSS

.inset{
    margin:1em;
    padding:1em;
    background-color:#ff0000;
    float:left;
    width:75px;
}

.article{
    padding:1em;
    background-color:#ccffcc;
}

.article p{
    line-height:1.4em;
    margin-bottom:.6em;
}
于 2012-09-18T12:46:38.557 回答
0

您应该使用clear: leftwhich 表示该元素不会接受其自身左侧的浮动元素，因此会跳到其下方。

于 2012-09-18T13:04:22.370 回答
-3

您必须“清除：正确”第一个 div ...

于 2012-09-18T12:41:06.077 回答