如何以响应方式定位四个 div？

Question

我正在尝试使用 4 个块的响应式布局，如下所示：

//Box1                            Box 3




//Box 2                        Box 4

我想要宽度为 60% 的左侧（box1、box2）和margin-right:5%，以及带有margin-top: 5% 的box2。

我想要的右侧（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;
}

Answer 1

将上面的 2 个盒子放在一个单独的容器中。 （对其他 2 做同样的事情）

* {
	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 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-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;
}

<div id="container">
    <div>
        <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-right-up">
            <h2>box 3</h2>
            <p>content</p>
            <p>content</p>
            <p>content</p>
        </div>
    </div>
       <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-down">
            <h2>box 4</h2>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
        </div>
    </div>
</div>

http://jsfiddle.net/4mpfu1xd/