本文展示了如何使用CSS实现一个两列布局，左侧列具有弹性宽度，右侧列保持200px的固定宽度。通过浮动元素和负margin技巧，实现了在不使用flex布局的情况下，自适应屏幕宽度变化的效果。
自适应布局
一共两列，左面的那一列弹性的，右面的那一列宽度是固定的200px。不允许使用flex布局
代码实现
css
#main,#sideBar{
float: left;
color: #fff;
}
#main{
width: 100%;
margin-right: -200px;
background-color: #10375E;
}
#sideBar{
width: 200px;
background-color: #00B5EE;
}
html
<div id="main"><p>这是主体部分，弹性宽度</p></div>
<div id="sideBar"><p>这是侧栏部分，固定宽度</p></div>
缩小浏览器宽度，可以查看效果
扫一扫
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
