Question

我有两排，其中第一排我有三个div，第三个div有很高的高度。在第二行中我有一个div。我只想将第二行div放在第一行div的下方，而不使用margin top in negative和sequence应该是相同的，而不是使用1,2和4 div的父div。提前谢谢。

＆＃13;

div{
 float: left;
    color: white;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
}

＆＃13;

<div style="width:40%;padding:40px;background-color:pink;"> 
1
</div>

<div style="width:20%;padding:40px;background-color:black;">
2
</div>

<div style="width:20%;padding:40px;background-color:green; height:500px;">
3
</div>
<div style="width:20%;padding:40px;background-color:blue;">
4
</div>

＆＃13;

Answer 1

是的，只要在你要放下的那些div中添加清楚。喜欢

<div style="width:20%;padding:40px;background-color:black;clear: both;">2</div>

Answer 2

如果你想要实现这个目标，也许你应该在你的div中尝试不同的结构，如果我理解正确的话。

为左窗格创建一行包含级联div，为右页创建一行div（第三个div）

<div class="left-pane">
    <div style="width:40%;padding:40px;background-color:pink;">1</div>
    <div style="width:20%;padding:40px;background-color:black;">2</div>
    <div style="width:20%;padding:40px;background-color:blue;">4</div>
</div>
<div class="right-pane">
    <div style="width:20%;padding:40px;background-color:green; height:500px;">3</div>
</div>

请告诉我这是否适合您。我很乐意提供帮助。

Answer 3

终于得到了我自己的解决方案。谢谢你们的努力。

＆＃13;

div{
    color: white;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
}

＆＃13;

<div style="width:40%;padding:40px;background-color:pink; float:left;"> 
1
</div>

<div style="width:20%;padding:40px;background-color:black;float:left;">
2
</div>

<div style="width:20%;padding:40px;background-color:green; height:500px;float:right;">
3
</div>
<div style="width:20%;padding:40px;background-color:blue;float:left;">
4
</div>

＆＃13;

我想将第二行div放在第一行div

3 个答案: