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