关于CSS 自适应问题。

Posted 2023-03-21

两列布局，左列按照内容自适应，右列按照浏览器宽度自适应。
咋做呢？ 谢啦。
不好意思，我要的是宽度自适应。
还是没明白我的意思。左列右列都是不定宽的。
都是在自适应。所以只要有定义width，理论上就是错的。

参考技术A <style type="text/css">
body font-family:Verdana; font-size:14px; margin:0;
#container margin:0 auto; width:100%;
#sidebar float:right; width:220px; height:500px; background:#9c6;
#content margin-right:225px !important; margin-right:222px; height:500px; background:#ffa;
</style>
<div id="container">
<div id="sidebar">右边栏</div>
<div id="content">左边栏</div>
</div>
通过测试的
其中右侧宽度是220px，左侧设右外边距为225px，其中就出现了宽慰5px的空白边线
margin-right:225px !important; margin-right:222px; 是为了3像素bug设置的
希望对你有帮助 参考技术B <style type="text/css">

#wrapwidth:850px;height:auto;margin:0 auto;
.leftfloat:left;width:200px;height:auto;
.rightfloat:right;width:600px;height:auto;
.clearclear:both;
</style>

<div id="wrap">
<div class="left"></div>

<div class="right"></div>

<div class="clear"></div>
</div>

全高度自动适应 参考技术C 左侧div设置固定宽度，比如width:200px; float:left;
右侧div设置百分比宽度，比如width:100%; float:left;
这两个div外面的大div，不要设固定宽度。