cssクラシックレイアウトの聖杯レイアウト(左右固定、中間適応)

css聖杯レイアウトは国内では双飛翼レイアウトとも呼ばれ、このレイアウトの特徴は左右の幅が固定され、中間の幅が適応され、同理でも左側が固定され、右側が適応され、逆も可能である.
注:私はIE 6の互換性をしないでもう何年も経っています.

1つ目の方法:marginの使用

この方式の原理は,3つのブロックが左フローティングに設定され,中間のブロック幅が100%であり,左右のブロックのmarginを調整して3欄レイアウトを実現することである.html:

<div class="container">
  <div class="column main">
    <div class="main-wrap">main contentdiv>
  div>
  <div class="column left">leftdiv>
  <div class="column right">rightdiv>
div>

css:

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      margin: 0 auto;
    }
    /* clearfix */
    .container:after {
      clear: both;
      content: '\0020';
      height: 0;
      display: block;
    }
    .column {
      float: left;
      position: relative;
    }
    .left {
      background: #666;
      width: 150px;
      min-height: 400px;
      margin-left: -100%;
    }
    .main {
      width: 100%;
      background: #333;
      min-height: 400px;
    }
    .main-wrap {
      margin: 0 200px 0 150px;
      min-height: 400px;
    }
    .right {
      width: 200px;
      background: #999;
      min-height: 400px;
      margin-left: -200px;
    }

2つ目の方法:絶対位置決めの使用

この方式の原理は,親容器に幅100%,左右内ピッチ(padding)に左右ブロックの幅,左ブロックにmargin-leftを自己幅,右ブロックに絶対位置決めを用いて右上に位置決めすることである.
html:

<div class="container">
  <div class="left">leftdiv>
  <div class="main">maindiv>
  <div class="right">rightdiv>
div>

css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  max-width: 1200px;
  padding: 0 200px 0 150px;
  margin: 0 auto;
  position: relative;
}
.left {
  background: #666;
  float: left;
  width: 150px;
  margin-left: -150px;
  min-height: 400px;
}
.main {
  width: 100%;
  background: #333;
  min-height: 400px;
}
.right {
  width: 200px;
  background: #999;
  min-height: 400px;
  position: absolute;
  top: 0;
  right: 0;
}

 
転載先:https://www.cnblogs.com/SherryIsMe/p/4752402.html