css经典布局系列三——三列布局(圣杯布局、双飞翼布局)

文章目录

三列布局背景介绍
定位实现三列布局
浮动实现三列布局
圣杯布局
双飞翼布局

三列布局背景介绍

三列元素，左右元素固定宽度；
中间元素自适应；

<div id="left">left
</div>
<div id="middle">middle
</div>
<div id="right">right
</div>

定位实现三列布局

左右两列绝对定位并且固定宽度；
中间元素自适应，且左右margin设置为左右元素的宽度；
定位的缺点：当出现滚动条时，内容区在滚动条后边显示，而且内容区仍旧被压缩(不推荐使用)

*{margin: 0;padding: 0;
}
body{/*最小宽度 = left *2 + right  */min-width: 600px;
}
#left,#right{width: 200px;height: 200px;background: pink;
}
#middle{height: 200px;background: green;
}
// 三列的设置
#left{position: absolute;left: 0;top:0;/*透明度 0 - 1*//*opacity: 0.5;*/
}
#right{position: absolute;top:0;right: 0;
}
#middle{margin: 0 200px;
}

浮动实现三列布局

注意：因为浮动脱离了文档流，所以middle一定要放在三列元素的最后面；

<div id="left">left</div>
<div id="right">3</div>
<div id="middle">2</div>

缺点：如果有文字出现，布局就会错乱，导致扩展性不好。

* {
margin: 0;padding: 0;
}
body{/*最小宽度= left*2 + right*/min-width: 600px;
}
#left,#right{width: 200px;height: 200px;background-color:pink;
}
#middle{height: 200px;background-color: green;
}
#left{float: left;
}
#right{float: right;
}

如果添加的有文字，出现的问题：
- 1、middle未浮动，left和right浮动；
- 2、浮动的本质是解决文字环绕图片，所以添加的这个文字应该环绕着最近的那个浮动的元素围绕在周围排列；
- 3、将未浮动的middle挤了下去。

<body>这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字这里有文字<div id="left">left</div><div id="right">3</div><div id="middle">2</div>
</body>

圣杯布局

圣杯布局的要求：随着页面宽度的变化，三栏布局中的中间盒子优先自适应渲染，两边盒子宽度固定不变；
需求：
- 1.两边固定，中间自适应；
- 2.先加载middle内容；
- 3.三列等高布局；

<div class="wrap"><div id="header">header</div><div id="content"><div id="middle"><p>middle</p><p>middle</p><p>middle</p></div><div id="left">left</div><div id="right">right</div></div><div id="footer">footer</div>
</div>

步骤：
- 布局：有头，有尾，有内容，middle部分要放在content的最前部分，然后是left，reight；
- 浮动让三者在一行，出现高度塌陷，content清浮动；
- middle宽度设为100%，占满；
- left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;
- middle内容被left、right覆盖未显示，所以把middle内容拉回来，content:{padding: 0 200px};
- 此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来；
问题：
- 如果某一列内容过多，文字会溢出。解决方法：等高布局；
- 最小宽度问题：min-width:600px

.wrap{min-width: 600px;
}
#header,#footer{height: 50px;width: 100%;border: 1px solid;background-color: grey;
}
#content{ overflow: hidden;padding: 0px 200px;
}
#left,#right{width: 200px;height: 200px;background-color:pink;
}
#middle{background-color: green;width: 100%;
}
#middle,#left,#right{float: left;padding-bottom: 10000px;margin-bottom: -10000px;
}
#left{margin-left: -100%;position: relative;left: -200px;
}
#right{margin-left: -200px;position: relative;left: 200px;
}

双飞翼布局

需求和圣杯布局是一样的；
据说双飞翼是玉伯大大提的，思路是：middle是鸟的身体，left和right是鸟的翅膀，先把主要的东西middle放好，再将翅膀移到合适的位置；
步骤
- middle部分要放在content的最前部分，然后是left，reight；
- 浮动让三者在一行，出现高度塌陷，content清浮动；
- middle宽度设为100%，占满；
- left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;
- 以上，都和圣杯布局一样；
- 因为现在middle的内容被left和right覆盖了，我们除了考虑设置外围content的padding之外，还可以考虑用margin把middle拉过来；
- 在middle中加一个内部元素middle-inner，设置其margin:0 200px;

// html,middle中增加了middle-inner
<div class="wrap"><div id="header">header</div><div id="content"><div id="middle"><div class="middle-inner">middle</div></div><div id="left">left</div><div id="right">right</div></div><div id="footer">footer</div>
</div>// css
.wrap{min-width: 600px;
}
#header,#footer{height: 50px;width: 100%;border: 1px solid;background-color: grey;
}
#left,#right{width: 200px;height: 200px;background-color:pink;
}
#middle{background-color: green;width: 100%;float: left;
}
#content{overflow: hidden;
}
#left{float: left;margin-left: -100%;
}
#right{float: left;margin-left: -200px;
}
.middle-inner{margin: 0 200px;
}

css经典布局系列三——三列布局(圣杯布局、双飞翼布局)相关推荐

【CSS】圣杯、双飞翼布局
[CSS]圣杯.双飞翼布局文章目录 [CSS]圣杯.双飞翼布局圣杯布局基本布局样式接下来要把主区域移动到中间把右区域放在主区域的右边移动左右区域,防止两边挡住中间完整代码双飞翼布局基 ...
Altium Designer 手机设计之PCB布局 - 系列三
定期发布工程师们关注的一些有趣话题,Altium原厂资深技术顾问执笔,官方发布,让我们互相知道对方是怎么想的好吗? 上一个系列我们已经了解了手机布局中各主器件的布局操作以及注意事项等,接下来,我们来讲 ...
浅谈面试中常考的两种经典布局——圣杯与双飞翼
圣杯和双飞翼布局介绍最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 博客链接:http://www.xluos.com/index.ph... 圣杯布局和双 ...
浅谈面试中常考的两种经典布局——圣杯与双飞翼 1
2019独角兽企业重金招聘Python工程师标准>>> 圣杯和双飞翼布局介绍最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解. 圣杯布局和双飞 ...
css - 圣杯布局和双飞翼布局
参考: Flex 布局教程:语法篇 Flex布局那些年,奇妙的圣杯与双飞翼,还有负边距 CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里? CSS布局奇淫巧计之-强大的负边距聊聊为什么淘宝要提 ...
双飞翼布局内容不换行_web前端入门到实战：圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
圣杯布局、双飞翼布局的理解及对比
一.圣杯布局 1.圣杯布局的DOM结构如下: 圣杯特点简单记为:有头.有尾.包三列,圣杯布局中间是有container大容器包裹着左中右区域的. <!--特点:有头.有尾.包三列(有个conta ...
大厂经典面试系列之三：唯品会大数据开发面试【建议关注收藏订阅，你早晚会用上】掌握了这些面试题，余生不在怕面试
前言上一篇文章总结了大厂经典面试系列之一:京东Java面试.接下来的文章我将陆续献上大厂的经典面试系列,所列的题目不代表所有,只是从面试者的口中总结的几次面试题,也是万千面试题的缩影,诣在帮助即将面 ...
【百度前端学院学习笔记】Day9 圣杯布局和双飞翼布局
[百度前端学院学习笔记]Day9 圣杯布局和双飞翼布局圣杯布局(古老而费解的方法) 双飞翼布局(圣杯的改进) 参考资料: In search of the Holy Grail - A list a ...
大厂经典面试系列之二：京东Java面试【建议关注收藏订阅，你早晚会用上】
前言上一篇文章总结了大厂经典面试系列之一:百度Java面试.接下来的文章我将陆续献上大厂的经典面试系列,所列的题目不代表所有,只是从面试者的口中总结的几次面试题,也是万千面试题的缩影,诣在帮助即将面 ...

css经典布局系列三——三列布局(圣杯布局、双飞翼布局)

文章目录

三列布局背景介绍

定位实现三列布局

浮动实现三列布局

圣杯布局

双飞翼布局

css经典布局系列三——三列布局(圣杯布局、双飞翼布局)相关推荐

最新文章

热门文章