css經典佈局系列三——三列布局(聖盃佈局、雙飛翼佈局)

時間 2019-11-16

標籤 css 經典佈局系列雙飛欄目 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;
}
複製代碼

若是添加的有文字，出現的問題：
- 一、middle未浮動，left和right浮動；
- 二、浮動的本質是解決文字環繞圖片，因此添加的這個文字應該環繞着最近的那個浮動的元素圍繞在周圍排列；
- 三、將未浮動的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;
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。