文章目录
一列定宽,一列自适应
- 要求两列,左边一列固定宽度,右边一列根据浏览器自适应;
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
float + margin
- 左边浮动,右边设置margin-left等于左边元素宽度
<style>
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*间距可再加入 margin-left */
}
</style>
-
IE 6 中会有3像素的 BUG,解决方法可以在 .left 加入 margin-left:-3px
- 解决这个小bug的方案如下:
<style> .left { float: left; width: 100px; } .right-fix { float: right; width: 100%; margin-left: -100px; } .right { margin-left: 100px /*间距可再加入 margin-left */ } </style>
- 此方法不会存在 IE 6 中3像素的 BUG,但 .left 不可选择, 需要设置 .left {position: relative} 来提高层级。
- 注意此方法增加了不必要的 HTML 文本结构。
- 傲娇的程序员应该放弃太低版本的浏览器
float + overflow
- 相当于right也开启了bfc