CSS花车引起布局问题
问题描述:
当我使用下面的代码中,最后一个div重叠浮动内容:CSS花车引起布局问题
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>
常见的解决方法是这样:
<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>
然而,在我情况下,我不能添加额外的元素。有没有另外的解决方法呢?
编辑: 明确:均;固定重叠的问题,但有一个在最后一个div保证金,所以它是这样的:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>
而现在的新问题是,保证金没有显示出来。
答
你可以简单地清除漂浮...
<div style="background:red;clear: both;">test</div>
答
设置clear
财产上的最后<div>
到left
或both
:
<div style="background: red; clear: left;">test</div>
编辑:至于保证金,你可以做一些相对定位:
<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>
答
请尝试以下操作:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>
编辑。要获得margin-top,请将浮动底部添加到浮动元素
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>
答
这里没有必要使用浮动。制作前两个元素inline-block
元素,第三个元素为block
级元素。
HTML:
<div class="inline-block">
Test
</div><div class="inline-block">
Test
</div>
<div class="block">Test</div>
注意</div><div class="inline-block">
是感人。由于这两个元素是内嵌块元素,因此标记中的任何空格都会在演示文稿中产生空间。
CSS:
.inline-block {
width: 50%;
display: inline-block; }
.block { margin: 50px 0 0; }
+0
为什么downvote? – Wex 2012-01-02 09:11:31
你必须每两个div在50%以上。他们将填充外部容器的整个宽度,强制包装。问题是你不想包装? – nycdan 2011-12-31 20:51:02