Question

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

//Box1                            Box 3




//Box 2                        Box 4

我希望左侧（box1，box2）宽度为60％margin-right:5%，而box2为margin-top: 5%。

我需要35％宽度的右侧（box3，box4），带有margin-top:5%的box4。

我试图用下面的百分比来做到这一点，以适应任何规模，但它不起作用;元素不是我想要的位置。

在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/

如何以敏感的方式定位四个div？

1 个答案: