Question

为什么内容3和内容4不是两个独立的div？我怎样才能用css修复它？我希望第一个红色低于绿色，第二个红色低于第一个红色。

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

Answer 1

试试这个：

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

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

Answer 2

删除高度：0px然后它们不会重叠。

Answer 3

您可以通过为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;
    }

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

3 个答案: