几种两列自适应布局

总结几种两列自适应布局，在当前Chrome和FF下都测试过。

 

方案一：左自适应设margin-right，右定宽向右浮动：右div跑到第二行了，设置margin-top负高度。
方案二：左定宽向左浮动，右自适应设margin-left。
方案三：左适应，右定宽绝对定位 (额外设置父元素relative)。
方案四：左宽度100%，右负margin，左中子元素才是真正显示内容的，左子设margin-right。


  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <style>
  7         .header{
  8             border: 1px solid green;
  9             height: 50px;
 10             margin-bottom: 10px;
 11         }
 12         .logo{
 13             border: 1px solid red;
 14             width: 44px;
 15             height: 40px;
 16             margin: 4px auto 4px 4px;
 17         }
 18         .username{
 19             border: 1px solid black;
 20             width: 100px;
 21             float: right;
 22             text-align: right;
 23             margin: 25px 4px 2px auto;
 24         }
 25 
 26         /* 方案一：左自适应设margin-right，右定宽向右浮动：右div跑到第二行了，设置margin-top负高度 */
 27         .content{
 28             border: 1px solid blue;
 29             margin-right: 220px;
 30             height: 500px;
 31         }
 32         .aside{
 33             border: 1px solid red;
 34             width: 200px;
 35             float: right;
 36             margin-top: -500px;
 37         }
 38 
 39         /*方案二：左定宽向左浮动，右自适应设margin-left*/
 40         /*.content{
 41             border: 1px solid blue;
 42             width: 200px;
 43             height: 500px;
 44             float: left;
 45         }
 46         .aside{
 47             border: 1px solid red;
 48             margin-left: 210px;
 49         }*/
 50 
 51         /*方案三：左适应，右定宽绝对定位 (额外设置父元素relative)*/
 52         /*.content{
 53             border: 1px solid blue;
 54             margin-right: 220px;
 55             height: 500px;
 56         }
 57         .aside{
 58             position: absolute;
 59             width: 200px;
 60             top: 0;
 61             right: 0;
 62             border: 1px solid red;
 63         }*/
 64 
 65         /*方案四：左宽度100%，右负margin，左中子元素才是真正显示内容的，左子设margin-right*/
 66 
 67         /*.container{
 68             width: 100%;
 69             float: left;
 70         }
 71 
 72         .content{
 73             border: 1px solid blue;
 74             margin-right: 210px;
 75             height: 500px;
 76         }
 77         .aside{
 78             border: 1px solid red;
 79             width: 200px;
 80             float: right;
 81             margin-left: -204px;
 82         }*/
 83 
 84         .footer{
 85             border: 1px solid black;
 86             margin-top: 10px;
 87             text-align: center;
 88         }
 89 
 90         </style>
 91     </head>
 92     <body>
 93         <header class="header">
 94             <img class="logo" alt="LOGO"></img>
 95             <span class="username" >用户名</span>
 96         </header>
 97         <section>
 98         <!-- <section style="position: relative;"> -->
 99             <!-- <div class="container" >
100                 <div class="content" >content </div>
101             </div> -->
102             <div class="content" >content </div>
103             <div class="aside" >aside </div>
104         </section>
105         <footer class="footer" >
106             footer
107         </footer>
108     </body>
109 </html>

 

比较喜欢第四种，好理解。

posted @ 2016-03-27 20:53  海绵小猪  阅读(310)  评论(0)    收藏  举报