页面布局元素的宽度可自行调整以适应浏览器宽度或父元素的宽度。
具体示例预览
原理:利用margin属性,约束局部元素定位。
HTML:
<div id="page">
<div id="right">
right
</div>
<div id="left">
Left
</div>
</div>
CSS:
#page {
background-color: #FF0000;
min-height:300px;
}
#page #right {
width: 300px;
background-color: #0000FF;
float: right;
height: 200px;
}
#page #left {
background-color: #FFFF00;
margin-right: 350px;
height: 200px;
}
代码说明:由于 #right设置float:left;所以需要根据实际情况给#page增加min-height属性,以防止#right的高度超过#page,造成#right溢出。也就是说尽量要保证#page的高度大于#right的高度。
你的自动何在!?
原来就是以前经常用的左边固定宽度,右边自动宽度…