效果:
html:
<div class="box1">
<div class="box2">1
</div>
<div class="box3">
<li>2</li>
<li>3</li>
<li class="x1">4</li>
<li class="x3">5</li>
<li class="x4">6</li>
<li class="x2">7</li>
</div>
</div>
css:
.box1{
width: 1000px;
height: 600px;
background-color: #aaffff;
margin: 50px auto;
}
.box2{
width: 200px;
height: 600px;
float: left;
background-color: #9af8ed;
}
.box3{
width: 800px;
height: 600px;
float: left;
background-color: #d5fad6;
}
.box3 li{
list-style: none;
width: 250px;
height: 290px;
background-color: #d2f7f7;
float: left;
margin-right: 25px;
}
.box1 .box3 .x1{
margin-right: 0px;
}
.box1 .box3 .x2{
margin-right: 0px;
margin-top: 20px;
}
.box1 .box3 .x3{
margin-top: 20px;
}
.box1 .box3 .x4{
margin-top: 20px;
}