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

木頭房子發表於2019-04-21
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;
}
複製程式碼

相關文章