CSS经典三栏布局方案
2017-11-30 11:33
453 查看
1. float布局
最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>此时可以得到左右两栏分布：
接下来再来看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。（但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。）所以此时只需在container容器内添加一个正常的div，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
margin-left: 120px;
margin-right: 120px;
}
.container {
border: 1px solid black;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
优势：简单
劣势：中间部分最后加载，内容较多时影响体验
2. BFC 规则
BFC(块格式化上下文)规则规定：BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可：<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>3. 圣杯布局
圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。
第一步，先来看下基本布局
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
此时看到的效果是：左、右两栏被挤到第二行。这是因为
main的宽度为
100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中：
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
}第二步，将
left的
margin-left设置为
-100%，此时左栏会移动到第一行的首部。然后再将
right的
margin-left设置为其宽度的负值：
-100px，则右栏也会移动到和左、中栏一行中：
不过此时还没有大功告成，我们试着在
main中加入一些文字：
<body> <div class="container"> <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div> <div class="left"></div> <div class="right"></div> </div> </body>
可以看到文字被压住了，接下来就要解决这个问题。
第三步，给
container一个padding，该padding应该正好等于左、右栏的宽度：
.container {
padding-left: 100px;
padding-right: 100px;
}此时看到的结果是左、中、右三栏都整体收缩了，但文字依然被压住了。
第四步，给左、右两栏加上相对布局，然后再通过设置left和right值向外移动：
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
position: relative;
left: -100px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
position: relative;
right: -100px;
background-color: yellow;
}到此为止，大功告成：
4. 双飞翼布局
双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：既然
main部分的内容会被遮挡，那么就在
main内部再加一个
content，通过设置其
margin来避开遮挡，问题也就可以解决了：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
float: left;
width: 100%;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.main::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>唯一需要注意的是，需要在
main后面加一个元素来清除浮动。
5. flex布局
flex布局是趋势，利用flex实现三栏布局也很简单，不过需要注意浏览器兼容性：<style type="text/css">
.container {
display: flex;
flex-direction: row;
}
.middle {
height: 200px;
background-color: red;
flex-grow: 1;
}
.left {
height: 200px;
order: -1;
margin-right: 20px;
background-color: yellow;
flex: 0 1 200px;
}
.right {
height: 200px;
margin-left: 20px;
background-color: green;
flex: 0 1 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>有几点需要注意一下：
-
main要首先加载就必须写在第一位，但因为
left需要显示在最左侧，所以需要设置
left的order为-1
-
flex属性的完整写法是：
flex:
flex-grow
flex-shrink
flex-basis。这也是
flex实现三栏布局的核心，
main设置
flex-grow为1，说明多余空间全部给
main，而空间不够时，仅缩小
left
right部分，同时因为指定了
left
right部分的
flex-basis，所以指定了两者的宽度，保证其显示效果
6. 绝对定位
绝对定位的方式也比较简单，而且可以优先加载主体：<style type="text/css">
.container {
}
.middle {
position: absolute;
left: 200px;
right: 200px;
height: 300px;
background-color: yellow;
}
.left {
position: absolute;
left: 0px;
width: 200px;
height: 300px;
background-color: red;
}
.right {
position: absolute;
right: 0px;
width: 200px;
background-color: green;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型
- Css三栏布局自适应实现几种方法
- CSS三栏布局
- 全屏的三栏div+css布局示例
- CSS三栏布局探讨——中间固定宽度两边自适应宽度
- 收藏网站制作常用经典css.div.布局.设计实例打包下载(下方有其他链接)
- DIV+CSS三行两列经典布局
- CSS三栏布局方法
- CSS-左边定宽，右边自适应布局方案
- css flex实现经典的三栏布局
- 图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法)
- 标准W3C盒子模型和IE盒子模型之CSS布局经典盒子模型
- 【CSS】CSS经典布局之居中定位
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
- 前端经典三栏布局，中间自适应。
- css三栏布局
- CSS实现三栏布局和垂直居中
- css经典布局—Sticky footers布局
- css三栏布局