CSS仪表板列不相互浮动。
CSS仪表板列不相互浮动。
提问于 2014-06-20 13:12:46
所以我有一个很难解释的问题。下面是显示问题的JSFiddle：
http://jsfiddle.net/c9cwB/
CSS：
#container {
width: 400px;
height: 400px;
}
.div1 {
width: 50%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 50%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}Html：
<div id="container">
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
</div>我想要的是蓝色的盒子坐在绿色的盒子下面，所以它看起来像一个网站仪表板。
我该怎么做？您可以更改css/html来修复它。
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-06-20 13:17:43
您可以向右浮动.div3并将clear:left;添加到.div2中以获得所需的布局(您可以删除显示属性，因为它与浮点数结合使用是没有用的)。
我还简化了CSS代码，向左div添加了一个类，并使用它对其进行样式化。
演示
HTML：
<div id="container">
<div class="div1 left"></div>
<div class="div3"></div>
<div class="div2 left"></div>
</div>CSS：
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
.left {
float:left;
width: 50%;
height: 50%;
}
.div1 {
background: green;
}
.div2 {
background: blue;
clear:left;
}
.div3 {
width: 50%;
background: red;
height: 100%;
float: right;
}Stack Overflow用户
发布于 2014-06-20 13:17:07
您必须在您的div3类上对浮点数进行磨练。
它应该是浮动的:右；而不是浮动:左；
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: right;
}Stack Overflow用户
发布于 2014-06-20 13:18:36
在另一层中将你想要的包装到左边怎么样：
http://jsfiddle.net/dactivo/c9cwB/6/
<div id="container">
<div id="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="div3"></div>
</div>/* Styles go here */
#container {
width: 400px;
height: 400px;
}
#wrapper{width:50%; display: inline-block;height:100%;float:left}
.div1 {
width: 100%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 100%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24328138
复制相关文章
相似问题
腾讯云开发者
