实现下图的布局
需求:左侧content自适应,右侧固定200px宽度并并列显示。
css代码
<style type="text/css">
*{margin:0px; padding:0px;overflow:hidden;}
header{margin:5px;width:98%;padding:6px;border:1px solid green;text-align:center;}
.container{margin:5px;width:99%;overflow:hidden;}
.left{
float:left;
width:100%;
}
.content{
height:300px;
margin-right:210px;
border:1px solid purple;
}
.right{
float:left;
width:200px;
border:1px solid pink;
margin-left:-202px;
}
footer{margin:5px;width:98%;padding:6px;border:1px solid #000;text-align:center;}
</style>
html 代码
<body>
<header>我是header</header>
<div class="container">
<div class="left">
<div class="content">content-自适应宽度</div>
</div>
<div class="right">
aside-200px固定宽度
</div>
</div>
<footer>footer</footer>
</body>
还有一种方法实现左侧自适应,右侧固定宽度:
将右侧div设置float:right;width:200px;
设置左侧div的margin-right:200px;
切记在html中右侧的div位置在左侧的div之前
css样式
.container{margin:5px;width:98%;}
.left{margin-right:200px;border:1px solid purple;height:300px;}
.right{float:right;width:200px;height:auto;border:1px solid #000;}
html代码
<!--div class="right"的div必须设置在div class="left"之前,否则div class="right"的div将换行显示---->
<div class="right">
aside-宽度200px
</div>
<div class="left">
content-自适应宽度
</div>
</div>