html/css 浮动练习之井字形布局 - 保卫萝卜

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 .body{ margin:100px 100px 0 100px; width:300px; height:300px; overflow:hidden;}
 8 .div{ float:left; width:100px; height:100px; border:1px solid #000; border-right:0 none; margin-left:-2px; margin-top:-2px; border-bottom:0;}
 9 </style>
10 </head>
11 <body>
12 <div class="body">
13 <div class="div"></div>
14 <div class="div"></div>
15 <div class="div"></div>
16 <div class="div"></div>
17 <div class="div"></div>
18 <div class="div"></div>
19 <div class="div"></div>
20 <div class="div"></div>
21 <div class="div"></div>
22 </div>
23 </body>
24 </html>

效果图：

posted on 2016-08-24 10:20 保卫萝卜阅读(785) 评论(0) 收藏举报

刷新页面返回顶部