CSS左右两列布局宽度100%

最新推荐文章于 2021-06-10 18:08:37 发布

TangZhongxin

最新推荐文章于 2021-06-10 18:08:37 发布

阅读量3.9k

点赞数

分类专栏： CSS HTML和WEB 文章标签： css float wrapper header div

本文链接：https://blog.csdn.net/tangzhongxin/article/details/4398104

版权

CSS 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

HTML和WEB

46 篇文章 0 订阅

订阅专栏

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

css左右两列布局宽度自适应

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