.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 當版面配置很窄時, nav 就會被擠扁。更糟的是,你不能在 nav 上使用 min-width 屬性來修復這個問題,因為視窗太小時,右邊的那欄的內容還是會壓到 nav 上面。
  section 
    p 【古文觀止 - 左傳 卷一 ‧ 鄭伯克段于鄢】
    p 初,鄭武公娶于申,曰武姜,生莊公及共叔段。莊公寤生,驚姜氏,故名曰寤生,遂惡之。愛共叔段,欲立之。亟請於武公,公弗許。及莊公即位,為之請制。公曰:「制,巖邑也。虢叔死焉,它邑唯命。」請京,使居之,謂之京城大叔。祭仲曰:「都城過百雉,國之害也。先王之制,大都,不過參國之一;中,五之一;小,九之一。今京不度,非制也,君將不堪。」公曰:「姜氏欲之,焉辟害?」對曰:「姜氏何厭之有?不如早為之所,無使滋蔓。蔓,難圖也。蔓草猶不可除,況君之寵弟乎?」公曰:「多行不義必自斃,子姑待之。」既而大叔命西鄙、北鄙貳於己。公子呂曰:「國不堪貳。君將若之何?欲與大叔,臣請事之。若弗與,則請除之,無生民心。」公曰:「無庸,將自及。」大叔又收貳以為己邑,至于廩延。子封曰:「可矣!厚將得眾。」公曰:「不義不暱,厚將崩。」大叔完聚,繕甲兵,具卒乘,將襲鄭;夫人將啟之。公聞其期,曰:「可矣。」命子封帥車二百乘以伐京。京叛大叔段。段入于鄢,公伐諸鄢。五月辛丑,大叔出奔共。書曰:「鄭伯克段于鄢。」段不弟,故不言弟。如二君,故曰克。稱鄭伯,譏失教也。謂之鄭志。不言出奔,難之也。
  section 你可以看看當你調整瀏覽器視窗大小時發生了什麼事,版面配置的效果還不錯!
View Compiled
* {
  box-sizing: border-box;
}
.container {
  border: 2px solid #6AC5AC;  
}
.clearfix {
  overflow: auto; /*   clearfix 密技 */
}

nav {
  border: 2px solid #D64078;
}
section {
  padding: 10px;
  border: 2px solid #FDC72F;
}

body {
  margin-bottom: 120px;
}


@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;   
  }
}
@media screen and (max-width:599px) {
  li {
    display: inline;
  }
  li:not(:last-child)::after{
    content: " |";
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.