不一樣方式實現兩列布局

1.position例子

這個兩列布局左邊固定，右邊自適應。flexbox

這個例子在容器比nav元素高的時候能夠正常工做。若是容器比nav元素低，那麼nav會溢出到容器的外面。spa

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}

2.浮動佈局例子

這個兩列布局左邊固定，右邊自適應。與第一個position實現的效果基本相同。code

徹底使用 float 來實現頁面的佈局是很常見的。blog

nav {
  float: left;
  width: 200px;
}
section {
  margin-left: 200px;
}

注意佈局左邊使用了浮動，當nav比非浮動的內容還要高時就要在父容器上添加了.clearfix類清除浮動。圖片

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

3.百分比寬度佈局

首先介紹一下百分比寬度。

百分比是一種相對於包含塊的計量單位。它對圖片頗有用：以下咱們實現了圖片寬度始終是容器寬度的50%。把頁面縮小看下效果！

article img {
  float: right;
  width: 50%;
}

所以也能夠用百分比作佈局，可是這須要更多的工做。在下面的例子中，當窗口寬度很窄時 nav 的內容會以一種不太友好的方式被包裹起來。此時佈局左右塊的寬度不固定，會隨着瀏覽器寬度大小有所變化。總而言之，選一種最合適你的內容的方式。

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

4.inline-block 佈局

也能夠使用 inline-block 來佈局。這時是實現的佈局左右塊的寬度不固定，會隨着瀏覽器寬度大小有所變化。

有一些事情須要你牢記：

vertical-align 屬性會影響到 inline-block 元素，你可能會把它的值設置爲 top 。
你須要設置每一列的寬度
若是HTML源代碼中元素之間有空格，那麼列與列之間會產生空隙

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

5.使用 Flexbox 的簡單佈局

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

flexbox擴展知識

使用 Flexbox 的牛逼佈局

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

使用 Flexbox 的居中佈局

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

參考：http://zh.learnlayout.com/