CSS 三栏布局

参考：https://blog.csdn.net/ganyingxie123456/article/details/77054124

三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应

两列定宽一列自适应：

1. float + margin

HTML结构：

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="main">Main</div>
</div>

CSS样式：

body,html{ height: 300px; padding: 0; margin: 0; }
/*左边栏左浮动*/
.left{ float: left; height: 300px; width: 100px; background: #ff69b4; }
/*中间栏自适应*/
.main{ height: 300px; margin: 0 200px 0 100px; background: #659; }
/*右边栏右浮动*/
.right{ float: right; height: 300px; width: 200px; background: #ff69b4; }

图片说明

小结：左栏通过 float:left 左浮动，右栏通过 float:right 右浮动，中间栏通过 margin 控制距左右栏的位置；

2. position + margin

HTML结构：

<div class="container">
    <div class="left">left</div>
    <div class="main">center</div>
    <div class="right">right</div>
</div>

CSS样式：

body,html{ height: 100%; padding: 0; margin: 0; overflow: hidden; }
/* 左右栏绝对定位 */
.left{position:absolute;height:100%;top:0;background:#ff69b4;left:0;width:100px;}
.right{position:absolute;height:100%;top:0;background:#ff69b4;right:0;width:200px;}
/* 中间用margin空出左右元素所占的空间 */
.main{height:100%;margin: 0 100px 200px 0;background: #659;}

图片说明

小结：左右栏通过 position:absolute 绝对定位，中间栏通过 margin 控制左右边距；

3. table 布局

父级 div 设置 display：table，子级 div 设置 display: table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是 margin 失效，设计间隔比较麻烦。

HTML结构：

<div class="container">
    <div class="left">left</div>
    <div class="main">center</div>
    <div class="right">right</div>
</div>

CSS样式：

.container{ display: table; width: 100%; }
.container>div{ display: table-cell; }
.left{ width: 100px; height: 300px; background: red; }
.main{ height: 300px; background: blue; }
.right{ width: 200px; height: 300px; background: orange; }

高度由内容决定。

图片说明

4. flex 布局

HTML结构：

<div class="container">
    <div class="left">left</div>
    <div class="main">center</div>
    <div class="right">right</div>
</div>

CSS样式：

.container{ display: flex; }
.left{ width: 200px; height: 300px; background: red; }
.main{ flex: 1; height: 300px; background: blue; }
.right{ width: 200px; height: 300px; background: orange; }

这种布局方式，高度由内容决定。

图片说明

5. Grid 网格布局

parent 的 div 设置 display：grid，设置 grid-template-columns 属性，固定第一列第二列宽度，第三列auto。

HTML结构：

<div class="container">
    <div class="left">left</div>
    <div class="main">center</div>
    <div class="right">right</div>
</div>

CSS样式：

.container{
    display: grid;
    width: 100%;
    grid-template-rows: 100px;  /*设置行高*/
    grid-template-columns: 100px 200px auto;  /*设置列数属性*/
}
.left{ background: red; }
.main{ background: blue; }
.right{ background: orange; }

图片说明

6. 圣杯布局

HTML结构：

<div class="container">
    <div class="main col">Main</div>
    <div class="left col">Left</div>
    <div class="right col">Right</div>
</div>

CSS样式：

/* 两边定宽，中间自适用 */
body, html, .container{ height: 100%; padding:0; margin: 0; }

/* 三个col都设置float: left,为了把left和right定位到左右部分 */
.col{ float: left; position: relative; }

/*父元素空出左右栏位子: 因为上一步中，左右栏定位成功了，但是中间栏的内容会被遮盖住*/
.container{ padding:0 200px 0 100px; }

/*左边栏*/
.left{ left:-100px; width: 100px; height:100%; margin-left: -100%; background: #ff69b4; }

/*中间栏*/
.main{ width:100%; height: 100%; background: #659; }

/*右边栏*/
.right{ right:-200px;width:200px;height:100%;margin-left: -200px;background: #ff69b4; }

图片说明