1、css两栏布局，一列固定，另一列宽度auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*body存在8px的外边距*/
*{margin: 0;padding: 0;}
.right{width: 100px;height: 100px;background: rgba(255,0,0,0.5);position: absolute;left: 0;}
.left{height: 100px;background: #0f0;margin-left: 100px;}
</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>注意：position定位要写在前面，否则.left的div块元素导致position在下一列
2、css三栏布局，头尾固定，中间auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.left,.right{width: 100px;height: 100px; position: absolute;}
.left{left: 0;background: green;opacity: 0.5;}
.right{right: 0;background: yellow;opacity: 0.5;}
.middle{height: 100px;background: lightblue;margin-left: 100px;margin-right: 100px;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
</html>
扫一扫
1473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
