<div style="overflow:hidden">
<div style="float:left">左</div>
<div style="float:right">右</div>
</div>
<div>下</div>
用div+css布局。从上到下4个div，难点在于第三个div，也就是中间最大的那一部分。
这部分先分为左右两个div，
其中，左边的又要分成上下2个div,
右边的又要分成上中下3个div，在这其中最下面的一个div又要分成左右2个div。
首先，我们定义ul li 定义出大盒子和三个小盒子，给他们添加合适的高度宽度，在li 的三个小盒子里添加 float: left使其浮动，再给他们添加margin-right，这样他们之间就有个间隔啦。代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>三个盒子</title><style>*{ margin: 0padding: 0list-style: none} ul{ background: #edededheight: 300pxwidth: 640pxmargin: 0 auto} ul li{ background: #fffbox-sizing: border-boxborder: 1px solid #333height: 300pxwidth: 200pxfloat: leftmargin-right: 20px} ul li:last-child{ margin-right: 0px} ul li p{ text-align: center} ul li span{ display: blockfont-size: 14pxtext-align: centercolor: #e08c35font-weight: bold} </style></head><body><ul><li><img src="./imge/饼干.jpg" alt="" width="200" height="200"><p>薯味博饼280g</p><br><span>超值价￥9.9</span></li><li><img src="./imge/衣架.png" alt="" width="200" height="200"><p>铝制洗涤用衣架</p><br><span>超值价￥9.9</span></li><li><img src="./imge/拖鞋.png" alt="" width="200" height="200"><p>男/女轻d云朵家居鞋</p><br><span>超值价￥9.9</span></li></ul></body></html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）