右边固定,左边自适应
原理:两节点并排,左节点浮动,右节点向最左边靠齐,此时浮动元素会遮住左节点,因为块状元素默认长度100%;
html
<div id="wrap"> <div id="sidebar" style="height:340px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</div> </div> <div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>
css
#wrap { overflow: hidden; *zoom: 1; } #content ,#sidebar { background-color: #eee; } #sidebar { float: right; width: 300px; } #content { margin-right: 310px; } #footer {background-color: #f00;color:#fff; margin-top: 1em}
时间: 2024-11-07 21:18:57