所以我遇到了一个难以解释的问题。这是JSFiddle显示问题:
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来修复它。
答案 0 :(得分:2)
您可以将.div3
向右浮动,并将clear:left;
添加到.div2
以获得所需的布局(您可以删除显示属性,因为它与浮动无关)。
我还通过向左侧div添加一个类并使用它来设置样式来简化您的 CSS 代码。
<强> DEMO 强>
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;
}
答案 1 :(得分:1)
你必须改变div 3类的浮动。
它应该是浮动的:对;而不是浮动:左;
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: right;
}
答案 2 :(得分:1)
如何将你想要的那些包装在另一层的左边:
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;
}
答案 3 :(得分:1)
尝试Demo
<div id="container">
<div class="div3 right"></div>
<div class="div1"></div>
<div class="div2"></div>
</div>
答案 4 :(得分:0)
假设.widget
是仪表板的项目/框,您可以使用:
.widget {
float: left;
}
.widget:nth-child(even) {
float: right;
}