CSS如何在一个div的右侧有两个div但不相邻答案

【问题标题】：CSS how to have two divs to the right of one div but not beside each otherCSS如何在一个div的右侧有两个div但不相邻
【发布时间】：2011-05-04 11:00:43
【问题描述】：

我有三个 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 下方，而是在它旁边。

【问题讨论】：

标签： html css

【解决方案1】：

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

<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>s（或至少在红色的）上有特定的尺寸，您可以在没有包装器的情况下使用蓝色的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/

至少我认为这是你所追求的布局。

【讨论】：

@mu... +1 我们有相同的解决方案：D

【解决方案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>

【讨论】：

【解决方案3】：

我认为 CSS 定位是您所寻找的

W3Schools

【讨论】：

有几种方法可以做到这一点，定位只是一种选择。和 PS，我相信为了符合 W3 标准，你必须在文件或头部标签中完成你的样式
不要使用 W3Schools，一家与 W3 没有任何关联的公司 ;)
好吧，如果有人遇到 css 问题，w3schools 并不是最糟糕的起点，哈哈
真的，真的。毫无疑问，有更多更差的服务可用。但说到布局，W3Schools 使用基于<table> 的布局和已弃用的HTML 标记。当我看到他们时，我哭了......
我想知道 w3schools 有什么问题？我认为它对初学者最有帮助。