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

来源：意题教育

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

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

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

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin:0px;
 padding:0px;
 }
 .wrap{
 background:#777777;
 position:relative;
 overflow: hidden;
 }
 .border{
 background-color: #ccc;
 border:1px solid black;
 height:300px;
 }
 .left{
 width:200px; /*定宽的列*/
 height:600px;
 }
 .right{
 width:100%; /*自适应宽度的列*/
 height:300px;
 position:absolute;
 top:0px;
 left:220px;
 }
 </style>
 </head>
 <body>
 <div>
 <div class="left border"></div>
 <div class="right border"></div>
 </div>
 </body>
 </html>

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务