CSS左右两列布局宽度100%

CSS左右两列布局,子级宽度自适应(100%)

 

CSS左右两列布局宽度100%_第1张图片

 

 

<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;

 

 

你可能感兴趣的:(css,header,div,float,wrapper)