Maison > Article > interface Web > 使用绝对定位实现横向两列布局代码
使用绝对定位实现横向两列布局代码
- 高洛峰original
- 2017-03-15 09:25:571441parcourir
用绝对定位实现横向两列布局
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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：可(兼容IE6+)水平垂直居中图片及文字的实例代码Article suivant：利用frameset标签设计页面方法介绍