浅谈CSS双翼布局与圣杯布局
双翼布局和圣杯布局都是在中间设置三列的方式，中间是固定在中间的。最近，我们安排了三栏布局的说明，决定退出其中一个，并记录两个经典布局。1。圣杯的布局
浮动，负边距，相对定位，没有附加标记
设计素描
DOM结构：
头
主要
左
赖特
页脚
风格：
身体{填充：0；边距：0 }
页眉，页脚。。{宽度：100%；背景：# 666；高度：30px；明确：两；}
BD {。
左：150px填充；
填充右：190px；
}
左{。
背景：# e79f6d；
宽度：150px；
浮点数：左；
左缘：- 100%；
职位：相对；
左：- 150px；
}
主要{。
背景：# d6d6d6；
宽度：100%；
浮点数：左；
}
右{。
背景：# 77bbdd；
宽度：190px；
浮点数：左；
margin-left: - 190px；
职位：相对；
右：- 190px；
}
风格转变过程的左右部分
1、中间部分改变浏览器的宽度，所以使用100%，这里设*左向右左浮动，从100%中旬起，左右层就没有地方可去了。
左{。
背景：# e79f6d；
宽度：150px；
浮点数：左；
}
主要{。
背景：# d6d6d6；
宽度：100%；
浮点数：左；
}
右{。
背景：# 77bbdd；
宽度：190px；
浮点数：左；
}
2、左负margin150后，发现左走，因为负面的窗口已经没有位置，只能向上移动
左{。
背景：# e79f6d；
宽度：150px；
浮点数：左；
margin-left: - 150px；
}
三.然后，根据第二步，可以发现它可以通过移动窗口的宽度移动到左边，并使用负边距来定位左右列。
左{。
背景：# e79f6d；
宽度：150px；
浮点数：左；
左缘：- 100%；
}
右{。
背景：# 77bbdd；
宽度：190px；
浮点数：左；
margin-left: - 190px；
}
4。然而，问题出现了，中间是左和右，所以我们必须向外层添加填充物。
BD {。
左：150px填充；
填充右：190px；
}
5。但是在加法之后，左右列也会缩进，所以采用相对定位的方法相对于自己移动自己，得到最终结果。
左{。
背景：# e79f6d；
宽度：150px；
浮点数：左；
左缘：- 100%；
职位：相对；
左：- 150px；
}
右{。
背景：# 77bbdd；
宽度：190px；
浮点数：左；
margin-left: - 190px；
职位：相对；
右：- 190px；
}
2、双飞翼布局
不加额外的标签，圣杯的布局非常完美。圣杯的布局已经相对定位。之后，布局受到限制，宽度控制需要更改。还有没有其他方法可以更简洁方便呢
讨论淘宝UED下，增加一个额外的div可以使用浮动和负利率的相对布局。这就是我们所说的双翼布局。
DOM结构：主的内层添加一个div
头
*主
左
赖特
页脚
风格：
删除左右栏的相对位置。
删除包层填充并替换中间列中的div边距
体{
填充：0；
保证金：0
}
页眉，页脚
宽度：100%；
背景：# 666；
身高：30px；明确：两；
}
BD {。
/ *填充左：150px；* /
/ *填充右：190px；* /
}
左{。
背景：# e79f6d；
宽度：150px；
浮点数：左；
左缘：- 100%；
位置：*相对；
/ *左：- 150px；* /
}
主要{。
背景：# d6d6d6；
宽度：100%；
浮点数：左；
}
右{。
背景：# 77bbdd；
宽度：190px；
浮点数：左；
margin-left: - 190px；
位置：相对；
/ *右：- 190px；* /
}
内{。
左：150px保证金；
右边距：190px；
}
3，双翼布局与圣杯布局的区别。
在上半场，圣杯的布局和两翼布局的解决方案是相同的，也就是说：
中间列的宽度设置为100%。
所有浮点数都在三列中浮动。
左、右两列向中间列div添加负边距，以形成三列布局。
不同的是，中间列中div内容的解决方案是不一样的。
圣杯的布局
将三列的外包装层设置为左侧和右侧的左填充和右填充。
左右两个div的相对布局与位置的相对布局：相对的和左右的属性分别，相对于自身移动，以免阻塞中间div。
双翼布局
在中间的div，创建一个用于放置内容细分
在这个细分，使用左、右缘缘为左、右两列分离开的位置
超过1分，与4的CSS属性（加左静脉滴注肾盂造影术在圣杯布局填充正确的这2个特性，再加上两个div的相对位置：相对布局和相应的左、右共有4个楼盘，共6个；与飞翼布局的div左、右缘缘2性能，6-2 = 4）。
双翼布局有很好的优势。让主成为BFC元，屏幕宽度缩小主不会被挤下来，圣杯布局将被挤压。
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。