我正在尝试使用4个块的响应式布局，如下所示：
//Box1 Box 3
//Box 2 Box 4
我希望左侧（box1，box2）具有60％的宽度和 margin-right:5% ，而box2具有 margin-top: 5% .
我想要的右侧（box3，box4）有35％的宽度，box4有 margin-top:5% .
我试图用下面的百分比来做到这一点，以适应任何大小，但它不起作用;元素不是我想要的位置 .
在h2中，背景工作正常，但我希望盒子有 background: white ，但由于某种原因它不起作用 .
这是代码：
http://jsfiddle.net/zqmwen3n/2/
HTML：
<div id="container">
<div class="box-left-up">
<h2>box 1</h2>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div class="box-left-down">
<h2>box 2</h2>
<p>conteudo</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div class="box-right-up">
<h2>box 3</h2>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div class="box-right-down">
<h2>box 4</h2>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
CSS：
* {
font-family: Arial, sans;
margin: 0;
padding: 0;
background: #F9F9F9;
}
#container {
margin: 0 auto;
width: 80%;
}
.box-left-up{
background: #fff;
float:left;
width:60%;
margin-right:5%;
background:#fff;
}
.box-left-up h2{
background: #F1F1F1 none repeat scroll 0% 0%;
border-bottom: 1px solid #C4C4C4;
box-shadow: 0px 1px 1px rgba(100, 100, 100, 0.1);
text-transform: uppercase;
padding: 20px;
text-align: center;
width: 60%;
font-size:16px;
}
.box-left-up p{
padding:10px;
}
.box-left-down{
float:left;
margin-top:20px;
background: #fff;
width:60%;
margin-right:5%;
}
.box-left-down h2{
background: #F1F1F1;
border-bottom: 1px solid #C4C4C4;
box-shadow: 0px 1px 1px rgba(100, 100, 100, 0.1);
text-transform: uppercase;
padding: 20px;
text-align: center;
width: 60%;
font-size:16px;
}
.box-right-up{
background: #fff;
float: right;
width:35%;
}
.box-right-up h2{
background: #F1F1F1 none repeat scroll 0% 0%;
border-bottom: 1px solid #C4C4C4;
box-shadow: 0px 1px 1px rgba(100, 100, 100, 0.1);
text-transform: uppercase;
padding: 20px;
text-align: center;
width: 60%;
font-size:16px;
}
.box-right-down{
background: #fff;
float: right;
width:35%;
}
.box-right-down h2{
background: #F1F1F1 none repeat scroll 0% 0%;
border-bottom: 1px solid #C4C4C4;
box-shadow: 0px 1px 1px rgba(100, 100, 100, 0.1);
text-transform: uppercase;
padding: 20px;
text-align: center;
width: 60%;
font-size:16px;
}
1 回答
将2个上方的盒子放在一个单独的容器中 . （对其他2做同样的事情）
http://jsfiddle.net/4mpfu1xd/