css flex布局 padding,css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）...

本篇文章给大家带来的内容是关于LNMP以源码的方式记录环境搭建的过程(详细)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果图：

圣杯布局

圣杯

.container{

padding:0 200px 0 180px;

height:100px;

}

.left{

float:left;

width:180px;

height:100px;

margin-left:-100%;

background:red;

position:relative;

left:-180px;

}

.main{

float:left;

width:100%;

height:100px;

background:blue;

}

.right{

float:left;

width:200px;

height:100px;

margin-left:-200px;

background:green;

position:relative;

right:-200px;

}

middle

left

right

双飞翼布局

双飞翼

.main{

float:left;

width:100%;/*左栏上去到第一行*/

height:100px;

background:blue;

}

.left{

float:left;

width:180px;

height:100px;

margin-left:-100%;

background:red;

}

.right{

float:left;

width:200px;

height:100px;

margin-left:-200px;

background:green;

}

left

right

Flex布局

Flex

.flex {

display: flex;

flex-flow: row;

}

.left{

width: 180px;

height: 100px;

background-color: red;

}

.main{

flex: 1;

height: 100px;

background-color: blue;

}

.right {

width: 200px;

height: 100px;

background-color: green;

}

left

middle

right

如果main要给左边的left模块和右边的right模块都让出一定宽度来的话，只有padding：0 100px 0 200px;或者margin：0 100px 0 200px;这两种方式！

这两条路线：

如果走margin路线， 一路走下去，你会发现最后你写出的代码就是双飞翼；

如果走padding路线，那就是圣杯！

相关文章推荐：