CSS三栏布局的实现方法总结（代码示例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS三栏布局的实现方法总结（代码示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6220字，纯文字阅读大概需要9分钟。
内容图文
本篇文章给大家带来的内容是关于CSS三栏布局的实现方法总结（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。对于前端来说，布局也是必须掌握的，一个好的布局可以让页面看起来更美观。提到布局，那就不得不说CSS三栏布局。这是前端面试经常会问到的一个问题，算是基础题。所谓的三栏布局，一般是指左右两边固定中间自适应，或者是中间固定左右两边自适应。
左右两边固定中间自适应
圣杯布局
HTML结构设置
新建一个父元素，包含三个子元素：left、main、right（注意，main在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）
style样式设置
1、父元素设置高度
2、三个元素均设置浮动
3、中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
4、左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
5、父元素设置padding-left: 左盒子宽；padding-right: 右盒子宽
6、左右盒子相对定位
<div class="container">
<div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
<div class="left f"></div>
<div class="right f"></div>
</div>
<style>
body {
min-width: 700px;
}
.container {
height: 300px;
padding: 0 200px 0 200px;
}
.f {
float: left;
}
.main {
width: 100%;
height: 300px;
background-color: cornflowerblue;
}
.left {
width: 200px;
height: 300px;
background-color: indianred;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
height: 300px;
background-color: lightgreen;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>该布局受内部元素影响而破坏布局的概率低，但是当浏览器屏幕缩小的一定程度时，左右两侧的内容会掉下来，或发生重叠现象。解决方案，给body加一个最小宽度（起码大于左右两侧宽度之和）
双飞翼布局
与圣杯布局的思路是一致的，只是有一些细微的差别。
HTML结构设置
新建一个父元素，包含三个子元素：left、main、right（注意，main在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）
style样式设置
1、父元素设置高度
2、三个元素均设置浮动
3、中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
4、中间main部分再加一个盒子inner，放置内容（与圣杯布局的不同点）
5、左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
6、新添加盒子，inner，设置左右padding或margin
<div class="container">
<div class="main f">
<div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
</div>
<div class="left f"></div>
<div class="right f"></div>
</div>
<style>
.container {
height: 300px;
}
.f {
float: left;
}
.main {
width: 100%;
height: 300px;
background-color: cornflowerblue;
}
.left {
width: 200px;
height: 300px;
background-color: indianred;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: lightgreen;
margin-left: -200px;
}
.inner {
padding: 0 200px 0 200px;
}
</style>自身浮动
HTML结构设置
新建三个元素：left、right、main（注意，main写在后面）
style样式设置
1、左盒子左浮动，右盒子右浮动
2、中间部分设置margin或padding值
<div class="left"></div>
<div class="right"></div>
<div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<style>
.main {
margin: 0 200px 0 200px;
background-color: red;
height: 200px;
}
.left {
float: left;
width: 200px;
background-color: blue;
height: 200px;
}
.right {
float: right;
width: 200px;
background-color: pink;
height: 200px;
}
</style>CSS3新特性：flex
HTML结构设置
新建一个父元素，包含三个子元素：left、main、right（注意，main写在中间）
style样式设置
1、父元素设置宽度为100%，display: flex；
2、左右两则按产品需求设置宽高
3、中间部分设置flex: 1；
<div class="container">
<div class="left"></div>
<div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<div class="right"></div>
</div>
<style>
.container {
width: 100%;
height: 200px;
display: flex;
}
.main {
flex: 1;
background-color: red;
height: 200px;
}
.left {
width: 200px;
background-color: blue;
height: 200px;
}
.right {
width: 200px;
background-color: pink;
height: 200px;
}
</style>还有其他的写法，这里就不一一赘述，只是列举了一些比较常用的，以及面试可能会问到的情况。CSS3还有很多好玩的特性，在工作和学习的过程中值得深入研究。
中间固定左右两边自适应
浮动 + 负边距 （圣杯布局）
HTML结构设置
新建一个父元素，包含三个子元素：left、main、right（注意，main写在中间）
style样式设置
1、左右两边各占50%的宽度
2、左边负边距 margin-left 占中间p宽度的一半
3、右边负边距 margin-right 也占中间p宽度的一半
<div class="container">
<div class="left"></div>
<div class="main">我是中间内容</div>
<div class="right"></div>
</div>
<style>
.main {
width: 100px;
text-align: center;
float: left;
background-color: lightgreen;
height: 300px;
}
.left {
height: 300px;
float: left;
width: 50%;
margin-left: -50px;
background-color: pink;
}
.right {
height: 300px;
float: right;
width: 50%;
margin-right: -50px;
background-color: cornflowerblue;
}
</style>CSS3新特性：flex
HTML结构设置
新建一个父元素，包含三个子元素：left、main、right
style样式设置
1、父元素设置display: flex；flex-direction: row；
2、左右设置flex-grow: 1，平分剩余空间
<div class="container">
<div class="left"></div>
<div class="main">我是中间内容</div>
<div class="right"></div>
</div>
<style>
.container {
display: flex;
flex-direction : row;
}
.main {
width: 200px;
height: 300px;
text-align: center;
background-color: lightgreen;
}
.left {
height: 300px;
flex-grow: 1;
background-color: pink;
}
.right {
height: 300px;
flex-grow: 1;
background-color: cornflowerblue;
}
</style>CSS3特性 calc(四则运算)
用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 50px)。
HTML结构设置
新建一个父元素，包含三个子元素：left、main、right
style样式设置
1、父元素设置100%宽；
2、左右设置width: calc(50%, - 中间宽/2)
<div class="container">
<div class="left"></div>
<div class="main">我是中间内容</div>
<div class="right"></div>
</div>
.container {
width: 100%;
height: 300px;
}
.f {
float: left;
}
.main {
width: 100px;
text-align: center;
background-color: lightgreen;
height: 300px;
}
.left {
height: 300px;
background-color: pink;
width: calc(50% - 50px); /*平分中间部分的宽度*/
}
.right {
height: 300px;
background-color: cornflowerblue;
width: calc(50% - 50px); /*平分中间部分的宽度*/
}路漫漫其修远兮，没有别人聪慧，那就坚持不懈努，相信勤能补拙。每天进步一点点，总有一天会迈进一大步。
以上就是CSS三栏布局的实现方法总结（代码示例）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的CSS三栏布局的实现方法总结（代码示例）全部内容，希望文章能够帮你解决CSS三栏布局的实现方法总结（代码示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。