Rumah > Artikel > hujung hadapan web > 使用绝对定位实现横向两列布局代码
使用绝对定位实现横向两列布局代码
- 高洛峰asal
- 2017-03-15 09:25:571441semak imbas
用绝对定位实现横向两列布局
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>Atas ialah kandungan terperinci 使用绝对定位实现横向两列布局代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：可(兼容IE6+)水平垂直居中图片及文字的实例代码Artikel seterusnya：利用frameset标签设计页面方法介绍