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

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

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

网站转换率优化之道

[美]　Khalid Saleh、[美]　Ayat Shukairy / 顾　毅 / 人民邮电出版社 / 2012-4 / 45.00元

内容简介：怎样才能将访问者转化为顾客？本书提供了一些切实可行的建议，比如如何说服访问者作出购买决定，如何避免用户因信息过量或导航繁琐而离开网站等。不论你是在设计或营销大型电子商务网站，还是在管理中小型在线业务，都可以从本书学会怎样使用市场营销原则、设计方法、可用性原则和分析数据来持续提升网站的转换率。作者帮助过众多公司吸引在线顾客，有着丰富的实战经验，在书中细致讨论了从访问......一起来看看《网站转换率优化之道》这本书的介绍吧!

码农工具