栅格化布局技术分析——负边距布局

最新推荐文章于 2022-11-08 15:44:25 发布

weixin_30888413

最新推荐文章于 2022-11-08 15:44:25 发布

阅读量102

点赞数

原文链接：http://www.cnblogs.com/whatmiss/archive/2012/09/07/2674666.html

版权

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Flying Swing Layout</title>
 6 <style type="text/css">
 7 <!--
 8 *{ margin:0; padding:0;}
 9 .content_box{
10     padding:10px;
11     background:#e1e1e1;
12     border:1px dotted #ccc;
13 }
14 .bodyArea{ background:#f0f0f0;}
15 /*-- 关键部分代码 --*/
16 .bodyArea{ width:1250px; margin:50px auto; zoom:1;border:1px solid #aaa;padding:10px;}
17 .body_wrap{ zoom:1; border:0px solid #aaa;}
18 .body_wrap:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
19 .main{ float:left; width:100%;}
20 .main_content{margin-left:240px; margin-right:200px;}
21 .side{ float:left; width:230px; margin-left:-100%;}
22 .extra{ float:left;  width:190px; margin-left:-190px;}
23 .clear{ display:block; height:0; clear:both; overflow:hidden;}
24 -->
25 </style>
26 </head>
27 <body>
28 <div class="bodyArea">
29     <div class="body_wrap">
30         <div class="main">
31             <div class="main_content">
32                 <div class="content_box">main:510px;
33                     <div style="height:600px;background:#888;">
34                         <div style="position:relative; left:100px;top:100px;width:200px;background:#aaa;">
35 
36                         ddd
37                         </div>
38                     </div>
39                 </div>
40             </div>
41         </div>
42         <div class="side">
43             <div class="content_box">side:230px;</div>
44         </div>
45         <div class="extra">
46             <div class="content_box">extra:190px;</div>
47         </div>
48     </div>
49 </div>
50 </body>
51 </html>

来自： http://www.jackness.org/?p=277

转载于:https://www.cnblogs.com/whatmiss/archive/2012/09/07/2674666.html

weixin_30888413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
栅格化布局技术分析——负边距布局

1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Flying Swing Layout</title> 6 <style type="text/css"> 7...
复制链接

扫一扫