CSS实现三列布局的3种⽅法及解析
答案：
1. CSS浮动
第⼀个 float:left，第⼆个 float:right，第三个设置margin-left和margin-right
2. 绝对定位法
第⼀个定位到left，第⼆个定位到right，第三个设置margin-left和margin-right
3. flex布局
将⽗元素box设为 display:flex；可将box设置为弹性盒模型进⾏布局
详细解析：
三栏布局，顾名思义就是两边固定，中间⾃适应。三栏布局在实际的开发⼗分常见。
⽐如淘宝⽹的⾸页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度⾃适应。
1. 浮动布局：第⼀个float:left，第⼆个float:right，第三个设置margin-left和margin-right
左栏左浮动，右栏右浮动，中间主体放在左栏右栏后⾯（中间栏会占据整⾏）。
注意点：必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下⼀⾏。
中间的宽度不固定，所以要加上margin左右的宽度让左右元素浮动
<meta charset="utf-8">
<title></title>
<style>
.left {
width: 400px;
height: 500px;
background: red;
float: left;
}
.center {
height: 500px;
background: yellow;
margin-left: 470px;
margin-right: 470px;
}
.right {
width: 400px;
height: 500px;
background: red;
float: right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
2. 绝对布局：第⼀个定位到left，第⼆个定位到right，第三个设置margin-left和margin-right
两边⽤绝对定位，中间⽤margin，左右宽度固定，中间宽度不固定，中间主体放在左栏右栏后⾯（中间栏会占据整⾏）
<meta charset="utf-8">
<title></title>
<style>
.left {
width: 400px;
height: 500px;
background: red;
position: absolute;
left: 0;
}
.center {
height: 500px;
background: yellow;
margin-left: 470px;
margin-right: 470px;
}
.right {
width: 400px;
height: 500px;
background: red;
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
3. flex布局：将⽗元素box设为display:flex；可将box设置为弹性盒模型进⾏布局.
flex-grow属性定义项⽬的放⼤⽐例，默认为0（不放⼤），即如果存在剩余空间，也不放⼤。
flex-shrink属性定义了项⽬的缩⼩⽐例，默认为1（缩），即如果空间不⾜，该项⽬将缩⼩。如果⼀个项⽬的flex-shrink属性为0，其他项⽬都为1，则空间不⾜时，前者不缩⼩。
flex-basis属性定义了在分配多余空间之前，项⽬占据的主轴空间（main size）。它的默认值为auto，即项⽬的本来⼤⼩。
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
cssclass属性
width: 100%;
height: 500px;
display: flex;
margin: 10px;
}
.left,
.right {
width: 400px;
height: 500px;
margin: 10px;
background-color: red;
}
.center {
/
* flex属性是flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */            flex: 1;  /* 放⼤ */
height: 500px;
margin: 10px;
/*左右margin不会叠加*/
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。