左侧固定宽度,右侧自适应宽度结构
原理:
定位(position)中的absolute属性值可以使元素脱离正常文档流,后面的元素向上移动,将后面的元素设置margin-left属性值设置为前面脱离文档流的元素的宽度,就可以完全显示后面的内容。
html代码如下:
<!DOCTYPE html>
<html>
<head>
<title>左侧固定宽度,右侧自适应页面</title>
<meta charset="utf-8">
<style type="text/css">
.container{
height: 200px;
background-color: #FFF;
}
.menu{
margin: 0 auto;
width: 1200px;
height: 200px;
background-color: gray;
}
.left{
position: absolute;
width: 200px;
height:200px;
background-color: red;
}
.right{
height: 200px;
margin-left:200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</body>
</html>
效果图: