在製作網站後台時，通常都是單欄式跟雙欄式佈局混合使用，有時候甚至會用到三欄。

勤勞一點的作法是做三個 layout，然後根據頁面去讀入對應的佈局檔，只是這樣一來有些代碼就要重複三次，實在是有點不環保。 所以我決定發揮懶的精神，弄個以不變應萬變的 Layout。

純粹的 HTML 代碼如下，#left 及 #right 可以視頁面需要附加上去。這份 HTML + CSS 能夠隨著 #wrapper 大小去縮放主內容區塊寬度，DEMO 在這。

HTML

<!-- 這裡的 class 在顯示時根據情況替換成 twoCols 或 threeCols -->
<div id="wrapper" class="oneCol">

  <div id="header">
    <div class="innertube">
      <!-- #header 內容區域-->
    </div>
  </div>

  <div id="container">

    <!-- 主要內容區域 -->
    <div id="main" class="column">
      <div class="innertube">
        <!-- #main 內容區域-->
      </div>
    </div>

    <!-- 為雙欄式時再加上這段 #left -->
    <div id="left" class="column">
      <div class="innertube">
        <!-- #left 內容區域-->
      </div>
    </div>

    <!-- 需要用到三欄式時，再加上 #left 及 #right -->
    <div id="right" class="column">
      <div class="innertube">
        <!-- #right 內容區域-->
      </div>
    </div>

  </div>

  <div id="footer">
    <div class="innertube">
      <!-- #footer 內容區域-->
    </div>
  </div>

</div>

CSS

這份樣式表主要是可讓內容區塊隨著 #wrapper 寬度而縮放，這邊設定的 #wrapper 寬度為 100%，可根據需要調整。

#wrapper, #header, #container, #main, #left, #right, #footer {
  overflow: hidden;
  _height: 1%; /* IE6 fix */
}
/* 1 column layout */
body, html {
  margin: 0; padding: 0;
        min-width: 600px;
}
#wrapper {
  width: 100%; /* 主要寬度 */
  margin: 0 auto;
}
#main {
  width: 100%;
}
#left {
  width: 200px;
  right: 200px;
  margin-left: -100%;
        _left: 0; /* IE6 Fix */
}
#right {
        width: 190px;
        margin-right: -100%;
}
.innertube {
  margin: 10px 20px;
}
/* columns */
.twoCols .column,
.threeCols .column {
  position: relative;
  float: left;
}
/* 1 column */
.oneCol #container {
  clear: both;
}
/* 2 columns layout */
.twoCols #container {
  padding-left: 200px;
}
/* 3 columns layout */
.threeCols #container {
        padding-left: 200px;
        padding-right: 190px;
}
.threeCols #left {
  _left: 190px; /* IE6 fix */
}

這樣不管是單欄、雙欄、三欄，統統都用它，下表是 #left 及 #right 是否存在之對應的 #wrapper class

PHP

以 PHP 來說，當然是希望每頁都能共用這份 layout，所以必須在讀入 layout 之前先設定 #wrapper class 以及對應的主要內容檔案

$wrapperClasses = array(
  1 => 'oneCol',
  2 => 'twoCols',
  3 => 'threeCols'
);
$useColumn = 1;       // 使用的欄數
$view = 'content.php'; // 主內容檔案

include 'layout.php'

layout.php

<div id="wrapper" class="<?php echo $wrapperClasses[$useColumn]?>">

  <div id="header">
    <div class="innertube">
      <!-- #header 內容區域-->
    </div>
  </div>

  <div id="container">

    <!-- 主要內容區域 -->
    <div id="main" class="column">
      <div class="innertube">
        <?php include($view); ?>
      </div>
    </div>

    <!-- 這裡假設 #left 及 #right 都搬到別的檔案去 -->
    <?php if ($useColumn > 1): include 'columnLeft.php'; endif; ?>
    <?php if ($useColumn > 2): include 'columnRight.php'; endif; ?>

  </div>

  <div id="footer">
    <div class="innertube">
      <!-- #footer 內容區域-->
    </div>
  </div>

</div>

參考資料

In Search of the Holy Grail