css三栏布局技巧,css三栏布局 两边固定 中间自适应的五种方式

1.浮动

2.定位

3.flex

4.圣杯布局

5.双飞翼布局

1、浮动

第一种就是浮动：左右浮动 中间不浮动

body {

margin: 0;

padding: 0;

}

.container {

width: 100%;

height: 200px;

}

.left {

width: 300px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 300px;

height: inherit;

background-color: red;

float: right;

}

.middle {

background-color: rosybrown;

height: inherit;

}

三栏布局

2、定位

使用绝对定位左右定位到两边 中间的根据具体情况设置left和right

body {

margin: 0;

padding: 0;

}

.container {

width: 100%;

height: 200px;

position: relative;

}

.left {

width: 300px;

height: 200px;

background-color: green;

position: absolute;

left:0;

}

.right{

width: 300px;

height: inherit;

background-color: red;

position: absolute;

right: 0;

}

.middle {

background-color: rosybrown;

height: inherit;

position: absolute;

left: 300px;

right: 300px;

}

三栏布局

3.flex 布局

设置父元素display为flex 实现三栏布局

body {

margin: 0;

padding: 0;

}

.container {

width: 100%;

height: 200px;

display: flex;

}

.left {

width: 300px;

height: 200px;

background-color: green;

}

.right{

width: 300px;

height: inherit;

background-color: red;

}

.middle {

background-color: rosybrown;

height: inherit;

flex: 1;

}

三栏布局

4.圣杯布局

header和footer各自占领屏幕所有宽度，高度固定。

中间的container是一个三栏布局。

三栏布局两侧宽度固定不变，中间部分自动填充整个区域。

中间部分的高度是三栏中最高的区域的高度。

body {

min-width: 550px; /* 2x leftContent width + rightContent width */

font-weight: bold;

font-size: 20px;

}

#header, #footer {

background: rgba(29, 27, 27, 0.726);

text-align: center;

height: 60px;

line-height: 60px;

}

#footer {

clear: both;

}

#container {

padding-left: 200px; /* leftContent width */

padding-right: 150px; /* rightContent width */

overflow: hidden;

}

#container .column {

position: relative;

float: left;

text-align: center;

height: 300px;

line-height: 300px;

}

#center {

width: 100%;

background: rgb(206, 201, 201);

}

#left {

width: 200px; /* leftContent width */

right: 200px; /* leftContent width */

margin-left: -100%;

background: rgba(95, 179, 235, 0.972);

}

#right {

width: 150px; /* rightContent width */

margin-left: -150px; /* rightContent width */

right: -150px;

background: rgb(231, 105, 2);

}

#header

#center

#left

#right

#footer

5、双飞翼布局

双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

代码更简洁

middle放在最前面

middle的width设置100%，left right 各自设置宽度

left middle right 都设置左浮动

此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%；此时left right 都脱离的文档，被middle挤下去了， margin-left 在父子之间，表示元素左外边距和父左内边距的距离，margin设置负数表示往上一个盒子靠近，

使用middle里面的div设置padding，不需要在使用定位了

同理设置right

*{

margin: 0;

padding: 0;

}

.header,

.footer {

height: 100px;

line-height: 100px;

background-color: green;

text-align: center;

font-size: 30px;

font-weight: bolder;

}

.footer {

background-color: goldenrod;

}

.container {

height: 200px;

}

.left {

width: 300px;

height: 200px;

background-color: green;

float: left;

margin-left:-100%;

}

.right{

width: 300px;

height: inherit;

background-color: red;

float: left;

margin-left: -300px;

}

.middle {

background-color: rosybrown;

height: inherit;

width: 100%;

float: left;

}

.inner {

margin: 0 220px 0 200px;

min-height: 130px;

background: blue;

word-break: break-all;

}

header

middle

middle

中间的盒子

left

左边的盒子

right

右边的盒子

footer