<div>
<strong></strong><span></span>//这是一条记录，你只要循环这里就好
</div>
css:
div{border-top:1px solid #efefefborder-left:1px solid #efefef}//这是外围DIV的CSS样式
div strong,div span{float:leftborder-right:1px solid #efefefdisplay:blockheight:50pxborder-bottom:1px solid #efefef}//定义一条记录的边框和高度
div strong{width:10%}//小的宽度
div span{width:40%}//大的宽度
<style>
body{
width: 980px
}
header{
background-color: rgb(0,0,214)
height: 100px
}
.content{
width: 100%
margin: 0px
}
.left{
float: left
width: 50%
background-color: rgb(24,248,0)
margin:0
height: 300px
}
.right{
width: 50%
/*float: left*/
margin-left: 50%
/*background-color: rgb(147,41,28)*/
height: 300px
}
.divtop{
width: 100%
}
.div1{
width: 50%
float: left
height: 150px
background-color: rgb(246,244,0)
}
.div2{
background-color: rgb(75,247,0)
height: 150px
}
.divbottom{
width: 100%
}
.div3{
float: left
height: 150px
width: 50%
background-color: rgb(213,9,152)
}
.div4{
background-color: rgb(244,188,91)
height: 150px
}
html 代码：
<body><header>
</header>
<div class="content">
<div class="left">
left
</div>
<div class="right">
<div class="divtop">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="divbottom">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
</body>
效果和你的图一致！
