Question

我有三个div背景色红色，黄色和蓝色。我想要左边的红色div。我想要红色旁边的黄色div。我想要红色旁边的蓝色div，但是在黄色div下面。我想出了

<html>
     <body>
          <div style="background-color:Red; height:50%; float: left">Red</div>
          <div style="background-color:Yellow; float: left; clear:right">Yellow</div>
          <div style="background-color:Blue; float:left">Blue</div>
     </body>
</html>

然而，这不起作用，因为蓝色div不在黄色div下面，而是在它旁边。

Answer 1

最简单的方法是将它们包装在<div>中以获取列：

<div class="wrapper">
    <div class="red">
        Red
    </div>
</div>
<div class="wrapper">
    <div class="yellow">
        Yellow
    </div>
    <div class="blue">
        Blue
    </div>
</div>

还有一些CSS：

.wrapper {
    float: left;
}
.red {
    background-color: red;
}
.yellow {
    background-color: yellow;
}
.blue {
    background-color: blue;
}

一个实例：http://jsfiddle.net/ambiguous/aNVam/

如果您的<div>（或者至少是红色的）上有特定的尺寸，那么您可以使用蓝色的clear: left和margin-left在没有包装的情况下执行此操作：

<div class="red">
    Red
</div>
<div class="yellow">
    Yellow
</div>
<div class="blue">
    Blue
</div>

这个的CSS：

.red {
    background-color: red;
    width: 100px;
    float: left;
}
.yellow {
    background-color: yellow;
    float: left;
    width: 75px;
}
.blue {
    background-color: blue;
    float: left;
    clear: left;
    width: 75px;
    margin-left: 100px; /* see .red */
}

此版本的实例：http://jsfiddle.net/ambiguous/t8mMt/1/

至少我认为这是你想要的布局。

Answer 2

从黄色和蓝色div中删除float: left;，即：

<html>
     <body>
          <div style="background-color:Red; height:50%; float: left">Red</div>
          <div style="background-color:Yellow;  clear:right">Yellow</div>
          <div style="background-color:Blue; ">Blue</div>
     </body>
</html>

Answer 3

我认为CSS定位就是你要找的东西

W3Schools

CSS如何在一个div的右边有两个div而不是彼此相邻

3 个答案: