CSS左右两列布局，子级宽度自适应(100%)
<body> <div id="bodymain" style="margin:0 auto;width:638px;"><!-- 这里宽度可以改,子级自适应 --> <div id="header"><h2>标题</h2></div> <div id="wrapper" style="float:right;width:100%;margin-left:-200px;"> <div id="content" style="margin-left:200px;" mce_style="margin-left:200px;"> <p>范仲淹</p> <h3>苏幕遮（怀旧）</h3> <p> 碧云天，黄叶地。秋色连波，波上寒烟翠。<br/> 山映斜阳天接水。芳草无情，更在斜阳外。<br/> 黯乡魂，追旅思。夜夜除非，好梦留人睡。<br/> 明月楼高休独倚。酒入愁肠，化作相思泪。 </p> <p>范仲淹</p> </div> </div> <div id="sidebar" style="width:200px; float:left; "> <ul> <li>姓名</li> <li>头像</li> <li>年龄</li> </ul> </div> <div id="footer" style="clear:both;" mce_style="clear:both;">版权所有</div> </div> </body>
关键在于：
#wrapper:float:right;width:100%;margin-left:-200px;
#wrapper里面的#content:margin-left:200px;
#sidebar:width:200px; float:left;
博客园 © 2004-2025 浙公网安备 33010602011771号 浙ICP备2021040463号-3
浙公网安备 33010602011771号