div 布局-ag凯发k8国际

其实三栏布局比较简单，而且方法也有很多。今天了解了一下传统的三栏布局方法：圣杯布局、双飞翼布局，本文简单记录一下。

所谓三栏布局，通常是指左右两栏定宽，中间一栏自适应页面宽度填满剩余空间的布局。

一、圣杯布局

<

这里有一点细节：主要内容部分，即中间栏dom放在了左右两栏dom之前，在dom树渲染的时候会被优先渲染。

div

圣杯布局的原理是：
container设置了padding之后浮动子元素的宽度计算100%是相对于container的宽度- paddingleft - paddingright，同时利用relative定位将左右两栏调整到合适位置。

效果图:

圣杯布局

二、双飞翼布局

dom结构与圣杯布局类似：

1、html代码

<

2、css代码

div

原理与圣杯布局略微不同之处在于，圣杯布局利用container设置padding的方法限制中间栏宽度，而双飞翼布局则在中间栏新加了一层dom，通过设置该dom的margin属性并利用块状元素水平方向的流动性自适应中间剩余宽度。

效果图：

三、总结

本文仅仅是对经典布局的一个简单记录，其实实现三栏布局还有很多其它的方法，比如flex布局、利用calc函数等，实现起来非常简单。

作者：muma

总结

以上是ag凯发k8国际为你收集整理的div 布局_css布局：三栏布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错，欢迎将ag凯发k8国际推荐给好友。