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

栏目: CSS · 发布时间: 5年前

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

<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;
}
复制代码

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

流畅的Python

[巴西] Luciano Ramalho / 安道、吴珂 / 人民邮电出版社 / 2017-5-15 / 139元

【技术大咖推荐】 “很荣幸担任这本优秀图书的技术审校。这本书能帮助很多中级Python程序员掌握这门语言，我也从中学到了相当多的知识！”——Alex Martelli，Python软件基金会成员 “对于想要扩充知识的中级和高级Python程序员来说，这本书是充满了实用编程技巧的宝藏。”——Daniel Greenfeld和Audrey Roy Greenfeld，Two Scoops ......一起来看看《流畅的Python》这本书的介绍吧!

码农工具

RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具

HSV CMYK互换工具