用绝对定位实现横向两列布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用绝对定位实现横向两列布局相关的知识，希望对你有一定的参考价值。
用绝对定位实现横向两列布局
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>
以上是关于用绝对定位实现横向两列布局的主要内容，如果未能解决你的问题，请参考以下文章