实现三列布局的四种方式的CSS示例

前言

事实上，无论是三栏布局，或两列布局是在平时项目中经常使用的，也许你不知道什么是三栏布局，两列布局，但实际上一直在使用，你可以知道一个或两个方法三栏布局，但实际操作中只会依赖在一种方法，本文介绍了四的三列布局的方法，并介绍了它的使用场景。
三列布局是指页面从左到右分为三部分，然后对布局的中间部分进行适应性调整。
1。绝对定位方法
HTML代码如下所示：

左
主要
赖特
CSS代码如下所示：

一个简单的css /重设
主体，HTML {
身高：100%；
填料：0px；
保证金：0px；
}
关于绝对定位
左，右，{
位置：绝对；
上图：0px；
背景：红色；
身高：100%；
}
左{。
左：0；
宽度：100px；
}
右{。
右：0px；
宽度：200px；
}
使用空白的/中间空出的元素占用的空间
主要{。
保证金：0px 200px 0px 100px；
身高：100%；
背景：蓝色；
}
这种方法的一个明显的缺点是，如果中间列的宽度限制最小或内部元素的宽度，当浏览器宽度小到一定程度时，就会出现层重叠。
2。圣杯布局
HTML代码如下所示：

注意元素顺序
主要
左
赖特
CSS代码如下所示：

CSS重新设置的习惯
主体，HTML {
身高：100%；
填充：0；
保证金：0
}
在体空间周围的父元素字段
{体
左：100px填充；
填充右：200px；
}
左/左元素变化
{左。
背景：红色；
宽度：100px；
浮点数：左；
左缘：- 100%；
职位：相对；
左：- 100px；
身高：100%；
}
中间部分/
{为主。
背景：蓝色；
宽度：100%；
身高：100%；
浮点数：左；
}
右/元素定义
{啊。
背景：红色；
宽度：200px；
身高：100%；
浮点数：左；
margin-left: - 200px；
职位：相对；
右：- 200px；
}
有关解释如下：
（1）中间部分需要改变浏览器的宽度，所以在100%，左向右这里是浮动的，从100%中旬开始，左右层就没有地方可去了。
（2）在左边缘为负100后，发现左向上，因为负窗口没有位置，只能向上移动。
（3）根据第二步，可以发现，只要窗口的宽度向左移动，右边就被用来定位左右柱。
（4）由于左右立柱覆盖中间部分，采用相对定位法自行移动，得到最终结果。
三.双翼布局
HTML代码如下所示：
主要
左
赖特
CSS代码如下所示：

重新设置
主体，HTML {
身高：100%；
填充：0；
保证金：0
}
{体
/ *填充左：100px；* /
/ *填充右：200px；* /
}
{左。
背景：红色；
宽度：100px；
浮点数：左；
左缘：- 100%；
身高：100%；
位置：*相对；
/ *左：- 100px；* /
}
{为主。
背景：蓝色；
宽度：100%；
浮点数：左；
身高：100%；
}
{啊。
背景：红色；
宽度：200px；
浮点数：左；
margin-left: - 200px；
身高：100%；
位置：相对；
/ *右：- 200px；* /
}
添加内部元素
{。内
左：100px保证金；
右边距：200px；
}
圣杯的布局实际上看起来非常复杂。后期维护不是很高。讨论淘宝UED之下，新的布局方式是双飞翼布局，代码如上。另外一个div可以不使用相对布局，只使用浮动和负利润。圣杯布局之间的差异进行了诠释。
4。浮动
HTML代码如下所示：

注意元素顺序
左
赖特
主要
CSS代码如下所示：

重新设置
主体，HTML {
身高：100%；
填充：0；
保证金：0
}
左栏/左浮动
{左。
背景：红色；
宽度：100px；
浮点数：左；
身高：100%；
}
自适应/中间
{为主。
背景：蓝色；
身高：100%；
保证金：0px 200px 0px 100px；
}
右栏/右浮动
{啊。
背景：红色；
宽度：200px；
浮子：右边；
身高：100%；
}
这种方法简单有效，易于理解。

总结

以上都是本文的内容，四种方法其实只对《飞翅阵》的布局和布局很难理解，但了解《飞翼布局》的圣杯布局，自然了解本文的内容，希望能给学习或工作带来一些帮助，如果有任何问题可以交换留言。