用绝对定位实现横向两列布局

2018-06-24 01:03:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

用绝对定位实现横向两列布局

1.左边定宽列的高度>右边自适应宽度的列

2.用绝对定位会脱离标准文档流,会改变自己在原来页面中的格式,所以需要使左边的列比右边的列高,目的是可以撑开父元素,如果左边的列比右边的列低,那么右边的列会发生溢出,此时可能会想到给父元素设置overflow:hidden;但是会发现右边的列的内容被截断了,部分内容无法看到.

 1 <!DOCTYPE html>
 2   <html lang="en">
 3   <head>
 4       <meta charset="UTF-8">
 5       <title>Document</title>
 6       <style>
 7           *{
 8               margin:0px;
 9               padding:0px;
10           }
11           .wrap{
12               background:#777777;
13               position:relative;
14               overflow: hidden;
15           }
16           .border{
17               background-color: #ccc;
18               border:1px solid black;
19               height:300px;
20           }
21           .left{
22               width:200px;  /*定宽的列*/
23               height:600px;
24           }
25           .right{
26               width:100%;  /*自适应宽度的列*/
27               height:300px;
28               position:absolute;
29               top:0px;
30               left:220px;
31           }
32       </style>
33   </head>
34   <body>
35       <div class="wrap">
36           <div class="left border"></div>
37           <div class="right border"></div>
38       </div>
39   </body>
40   </html>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于http-equiv

下一篇:css3注意小点