本文介绍了如何在不使用现代布局技术如Flexbox或Grid的情况下，通过浮动、margin、绝对定位和display:table实现左右两侧布局，其中一侧宽度固定，另一侧自适应屏幕宽度。详细解析了各种方法的实现代码和限制，适用于兼容低版本浏览器的场景。特别是针对内容区域需要在固定宽度区域之前显示的需求，提出了多种解决方案。
我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式：
1.左右结构，左边100%；右边宽度固定
2.左右结构，左边固定，右边100%
3.左中右结构，左边固定，右边固定，中间100%
上面介绍的就是为了兼容一下低版本浏览器的实现方式，没有使用像column或者flex啥的布局方式。但，我下面的讲解还是为了兼容低版本的实现方式做的总结，只是实现的方法多了几种罗列下。
不管是左是右，反正就是一边宽度固定，一边宽度自适应。
博客园的很多主题也是这样设计的，我的博客园博客也是右侧固定宽度，左侧自适应屏幕的布局方式。
html代码：
实现方式方式有如下几种：
1.固定宽度区浮动，自适应区不设宽度而设置 margin
我们以右侧宽度固定，左侧宽度自适应为例：
css代码：
#sidebar {
float: right; width: 300px;
}
#content {
margin-right: 300px;
}
实现效果图：
右侧一直固定不动，左侧根据屏幕的剩余大小自适应。
但实际上这个方法是有局限性的，那就是html结构中sidebar必须在content之前才行！
但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。
那么上面讲解的第一种方法就无效了。
就需要下面的方法来实现。
2.float与margin配合使用
首先我们调整一下html结构：
自适应区
css代码：
#content {
margin-left: -300px; float: left; width: 100%;
}
#content .contentInner{
margin-left:300px;
}
#sidebar {
float: right; width: 300px;
}
这样实现，contentInner的实际宽度就是屏幕宽度-300px。
3.固定宽度区使用绝对定位，自适应区设置margin
html结构
css代码：
#wrap{
position:relative;
}
#content {
margin-right:300px;
}
#sidebar {
position:absolute;
width:300px;
right:0;
top:0;
}
4.使用display:table实现
html结构：
css代码：
#wrap{
display:table;
width:100%;
}
#content {
display:table-cell;
}
#sidebar {
width:300px;
display:table-cell;
}
当然最后一种方法在IE7以及以下浏览器不兼容，因为IE7设置display为table不识别。
扫一扫
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
