标签：right 圣杯 width color 布局 双飞翼 background margin left

圣杯布局

应用场景

• 两侧内容宽度固定，中间内容自适应
• 三栏布局，中间一栏最先加载、渲染出来

实现方法

float+margin

<div id="header">header</div>
<div id="content">
  <div id="center" class="column">center</div>
  <div id="left" class="column">left</div>
  <div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>

body{
  min-width: 500px;
}
div{
  text-align:center; 
}
#header{
  background-color:#f1f1f1;
}
#content{
  /*留出#Left和#Right的空间*/
  padding: 0 200px 0 300px;
}
#content #center{
  background-color:#ddd;
  width:100%;
}
#content #left{
  /*不写的话right不会生效*/
  position:relative;
  background-color:red;
  width:300px;
  /*原本是center一行，left和right在下方同一行，-100%中的100%是父盒子宽度，相当于左右相对不变，移到上一行相同位置*/
  margin-left:-100%;
  /*right设置的是元素的右边缘，所以#left右边缘处于300px位置*/
  right:300px;
}
#content #right{
  background-color:blue;
  width:200px;
  /*此处可以理解为该设置使得right盒子缩小了200px，在外界看来没有宽度了，所以能够在一行上显示*/
  margin-right: -200px;
}
#content .column{
  float:left;
}
#footer{
  background-color:#f1f1f1;
  /*不清除浮动的话#footer会跟left和right在同一行*/
  clear:both;
}

双飞翼布局

原理和应用场景同上，优化了圣杯布局需要相对定位的问题。

<div id="main" class="column">
  <div id="main-wrapper">Main</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

body{
  min-width: 500px;
}
div{
  text-align:center; 
}
#main{
  background-color: #ddd;
  width:100%;
}
#main #main-wrapper{
  margin:0 200px 0 300px;
}
#left{
  background-color:red;
  width:300px;
  margin-left:-100%;
}
#right{
  background-color:blue;
  width:200px;
  /*往左拖拽即可，写成margin-right虽然也会上去成为一行但是不会移动到mian-wrapper元素margin-right空出来的位置，而是接在margin-right位置后面*/
  margin-left: -200px; 
}
.column{
  float:left;
}

标签：right,圣杯,width,color,布局,双飞翼,background,margin,left
来源： https://www.cnblogs.com/wmLinQ/p/14671937.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。