CSS - 两个div彼此叠加而不是两个独立的div

为什么content 3和content 4不是两个独立的div？我怎样才能解决它只与CSS？我希望第一个红色在下面是绿色的，第二个红色在下面是第一个红色。CSS - 两个div彼此叠加而不是两个独立的div

HTML

<div class="left">TODO write content1</div> 
<div class="left">TODO write content2</div> 
<div >TODO write content3</div> 
<div>TODO write content4</div>

CSS

div { 
width: 200px; 
height: 200px; 
background-color: red; 
} 
div:after { 
clear: both; 
display: block; 
content: ""; 
height: 0px; 
} 
div.left { 
float: left; 
background-color: green; 
}

来源

2014-04-22 Pavel

尝试机智这样的：

div { 
width: 200px; 
height: 200px; 
background-color: red; 
clear: both; 
} 

div.left { 
float: left; 
background-color: green; 
clear: none; 
}

来源

2014-04-22 22:13:41 Pirata21

这是工作，但为什么clearfix正在这样做？ – Pavel

第一个红色div位于第一个绿色框的后面，文本显示在下面，但实际上该框不在那里，所以，如果您使用clearfix，则该框应显示在您想要的位置。试试这个：http://jsfiddle.net/LsgsE/7/我已经改变了第三个盒子的颜色为蓝色，你可以看到没有使用清晰？ :) – Pirata21

删除高度：0像素，然后他们将不会重叠。

来源

2014-04-22 21:43:41 sn1ckers

这确实不行。 – Pavel

对不起，我错了那个电话。但很明显：这就是问题所在。所以为了让它起作用，你需要浮动：留在你的div上。 – sn1ckers

我想第一个红色是绿色的，第二个红色是红色的。 – Pavel

您可以通过添加一个包装到您的div解决它：

<div id="upper_block"> 
    <div class="left">TODO write content1</div> 
    <div class="right">TODO write content2</div> 
    <div class="left">TODO write content3</div> 
    <div class="right">TODO write content4</div> 
</div>

而且在你的CSS设置新的规则：

#upper_block { 
     width: 400px; 
    } 
    div { 
    width: 200px; 
    height: 200px; 
    } 
    div.right { 
    float: right; 
    background-color: green; 
    } 
    div.left{ 
    float: left; 
    background-color: blue; 
    }

来源

2014-04-22 22:04:32

我需要它们在第一行是2，在第二行是1，在第三行是1。 – Pavel

CSS - 两个div彼此叠加而不是两个独立的div

回答

相关问题