主要在于解决中间内容没有自动换行问题
1、圣杯的解决方式：在bd设置左右padding，然后sub和extra设置relative，按照自身宽度相对偏移
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
2、双飞翼布局：
main的宽度设置为100%，main-content设置左右margin，为sub和extra留出空间
<div id="main" class="column">
<div id="main-content">#main</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
关于圣杯布局和双飞翼布局：CSS布局之--淘宝双飞翼布局双飞翼布局介绍CSS控制自适应宽度两三栏布局圣杯布局的实现...
标签（空格分隔）： css 圣杯布局和双飞翼布局、flex布局 定义 圣杯布局（双飞翼布局）：两边定宽，中间宽度自...
双飞翼布局 双飞翼布局与圣杯布局细微区别 双飞翼布局比圣杯布局多了一个 main-inner标签 双飞翼布局不需要...
双飞翼布局 (淘宝UED对圣杯布局的升级优化) 圣杯布局和双飞翼布局的实现(三栏布局),都是左右两栏固定宽度,中间...
圣杯布局 HTML CSS 双飞翼布局 HTML CSS Flex布局 HTML和圣杯布局一样CSS
圣杯布局 双飞翼布局
六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。 圣杯布局 圣杯布局是指布...
实现圣杯布局和双飞翼布局，“负边距”是必不可少的。 了解圣杯布局和双飞翼布局之前，我们先来了解下负边距。一、定义：...
两栏布局 三栏布局 双飞翼布局 圣杯布局
圣杯布局代码： 双飞翼布局代码：
本文标题：圣杯布局和双飞翼布局差别
本文链接：https://www.haomeiwen.com/subject/zgqzxxtx.html
网友评论