.container.clearfix
  nav    
    ul
      li
        a(href="https://mike2014mike.github.io/") 首頁
      li
        a(href="https://mike2014mike.github.io/") 關於我們
      li
        a(href="https://mike2014mike.github.io/") 產品資訊
      li
        a(href="https://mike2014mike.github.io/") 服務項目
      li
        a(href="https://mike2014mike.github.io/") 聯絡我們
  section 這個例子和之前那個例子的結果一模一樣。請注意我們在容器上放了一個 clearfix 密技上去,原本在這個例子中是不需要的,但是當 nav 比這些「固定的」的內容(也就是那些沒有套用 float 的內容)還要高時就需要了。
View Compiled
* {
  box-sizing: border-box;
}
.container {
  border: 2px solid #6AC5AC;  
}
.clearfix {
  overflow: auto; /*   clearfix 密技 */
}
nav {
  float: left;
  left: 0px;
  width: 200px;
  border: 2px solid #D64078;
}
section {
  /* position is static by default */
  margin-left: 200px;
  padding: 10px;
  border: 2px solid #FDC72F;
}

body {
  margin-bottom: 120px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.