如题所述
<html>
<head>
<style type="text/css">
.zone
{
float:left;
width: 45%;
margin:3px;
height:200px;
border: solid 1px;
}
.z1
{
background-color:#00ffCB;
}
.z2
{
background-color:#ffffCB;
}
</style>
</head>
<body>
<div>
<div class="zone z1">
</div>
<div class="zone z2">
</div>
</div>
<div>
<div class="zone z2">
</div>
<div class="zone z1">
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
.zone
{
float:left;
width: 45%;
margin:3px;
height:200px;
border: solid 1px;
}
.z1
{
background-color:#00ffCB;
}
.z2
{
background-color:#ffffCB;
}
</style>
</head>
<body>
<div>
<div class="zone z1">
</div>
<div class="zone z2">
</div>
</div>
<div>
<div class="zone z2">
</div>
<div class="zone z1">
</div>
</div>
</body>
</html>
结果如下：
温馨提示：答案为网友推荐，仅供参考
第1个回答 2015-09-29
这个比较简单，可以拆分一下，先上下布局，在子区域里左右布局。
<div>
<div style="float:left;width:49%">上左</div>
<div style="float:rightwidth:49%">上右</div>
</div>
<div>
<div style="float:left;width:49%">下左</div>
<div style="float:rightwidth:49%">下右</div>
</div>
具体css自行设置
----------------------------
当然，先左右布局，在子区域里上下布局也行
<div>
<div style="float:left;width:49%">上左</div>
<div style="float:rightwidth:49%">上右</div>
</div>
<div>
<div style="float:left;width:49%">下左</div>
<div style="float:rightwidth:49%">下右</div>
</div>
具体css自行设置
----------------------------
当然，先左右布局，在子区域里上下布局也行
第2个回答 2014-05-05
哪有那么麻烦
<html>
<head>
<style type="text/css">
#main{width:416px;height:416px;}
.zone { float:left; width: 200px;height:200px; margin:3px; border: solid 1px #000;}
</style>
</head>
<body> <div id="main">
<div class="zone"> 1 </div>
<div class="zone">2 </div>
<div class="zone"> 3 </div>
<div class="zone">4 </div>
</div>
</body>
</html>本回答被提问者采纳
<html>
<head>
<style type="text/css">
#main{width:416px;height:416px;}
.zone { float:left; width: 200px;height:200px; margin:3px; border: solid 1px #000;}
</style>
</head>
<body> <div id="main">
<div class="zone"> 1 </div>
<div class="zone">2 </div>
<div class="zone"> 3 </div>
<div class="zone">4 </div>
</div>
</body>
</html>本回答被提问者采纳
