首页 > 代码库 > 用绝对定位实现横向两列布局

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

2024-09-08 02:37:51   238人阅读

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

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>

 

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


联系
我们