摘要：不管是左是右，反正就是一边宽度固定，一边宽度自适应。博客园的很多主题也是这样设计的，我的博客园博客也是右侧固定宽度，左侧自适应屏幕的布局方式。与配合使用首先我们调整一下结构自适应区固定宽度区代码这样实现，的实际宽度就是屏幕宽度。
我在前面有一篇文章《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.固定宽度区使用绝对定位，自适应区设置marginhtml结构
我现在的结构是在前面
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不识别。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110827.html
【第一列或某两列固定宽度，最后一列占据页面剩余宽度（即宽度自适应）】 写这篇文章主要是为了解决一个实际遇到的问题：左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，将右侧元素设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。...
【第一列或某两列固定宽度，最后一列占据页面剩余宽度（即宽度自适应）】 写这篇文章主要是为了解决一个实际遇到的问题：左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，将右侧元素设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。...
摘要：不做过多解释主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。不做过多解释：主要是记录一个完整的布局样式，实现页面大致三列其中左右两列是自适应宽度，中间固定宽度效果。 不多少代码奉上： CSS样式代码： /******************** *公共标签样式 ********************/ /********************...
摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结 由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...
CSS Reset 1.作用 （1）清除浏览器默认样式（2）全局样式定义 2.特别注意 （1）项目开发初期就定义好（2）reset.css 在引入的时候一定要放在第一位（3）不同的产品reset.css不一样 3.table合并边框间距 table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距。当 `borde...
阅读 859·2021-11-25 09:44
阅读 1063·2021-11-19 09:40
阅读 7061·2021-09-07 10:23
阅读 1974·2019-08-28 17:51
阅读 1106·2019-08-26 10:59
阅读 1927·2019-08-26 10:25
阅读 3130·2019-08-23 18:22
阅读 863·2019-08-23 16:58
