码迷,mamicode.com
首页 > 其他好文 > 详细

左两行右一行的布局(仅限三个div)

时间:2014-06-27 14:01:54      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   http   ext   

用三个div做一个类似下图的布局:

bubuko.com,布布扣

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <title>get objects by class</title>
        <style type="text/css">
        div{ background:#ccc}
        .no1{margin-bottom: 10px;}
        .no1,.no2{ width:100px; height:100px; float:left }
        .no2{ clear:both;}
        .no3{ margin-left:110px; *margin-left:107px; width:200px; height:210px }
        </style>
    </head>
    <body >
       
        <div class="no1">111</div>
        <div class="no2">222</div>
        <div class="no3">333</div>
    </body>
</html>
做这个布局有两个要点:
1。第二个div要清除浮动
2.考虑到IE6经常出现的三像素文本慢移,所以用IE6可识别的*做hack.

左两行右一行的布局(仅限三个div),布布扣,bubuko.com

左两行右一行的布局(仅限三个div)

标签:style   class   blog   code   http   ext   

原文地址:http://www.cnblogs.com/ron123/p/3810481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!