The Reqested Two Columns.

因為被要求了所以寫一下 Two Columns 的作法,因為是很簡單的東西所以就單刀直入罷 lol 。

HTML

<div id="header">Header Information</div>
<div id="container">
 <div id="main">Main Content</div>
 <div id="sidebar">Sidebar (Either Right or Left)</div>
</div>
<div id="footer">Footer Information</div>

這也是一般 weblog 的結構。

Layout

因為是本人的要求,所以就直接用ロイ同學現在的 layout 來參考罷。

<div id="header">...</div>
<table width="100%">
 <tr>
  <td width="68%" style="vertical-align: top;">Main Content</td>
  <td style="vertical-align: top;">Sidebar</td>
 </tr>
</table>

這樣會變成 Header 在上面,下面有個比例 2:1 (68% : 32%) 的 Two Columns layout 。這裡他用了一個 Table 來做,不論做法的好壞,我們來看 CSS 如何做到這樣的效果。

The Simplest

最簡單也是最普遍的做法是用 float 來解決。

#main {
 float: left;
 width: 68%;
}
#sidebar {
 float: right;
 width: 31%;
}
#footer {
 clear: both;
}

也許你會發現 #sidebar 跟 #main 合起來並不等於 100% ,這樣是防止 browser 在計算時的微誤令 #sidebar 不夠空位向右 right 而被擠到下面。

接下來只要把再把做好的分隔線圖片當成 background 放上去就成了。

#container {
 background: white url(./your-separator-image.png) repeat-y 68% top;
}

其他細部就自己來罷。

追伸。這樣能算是 CSS 的特別應用嗎...?

Comments

  1. 質問です。
    用CSS做三欄式的要如何做呢?

    ReplyDelete
  2. 補足です。
    你的CSS如果再加上margin, padding等而瀏覽器的大小也不大的時候sidebar還是被擠了下來呢...

    ReplyDelete
  3. > 補足
    Margin 跟 padding 也要是 % ,如果想用 absolute 的話就要加在 child elements 上面...。

    > 質問
    Three columns 如果三個都是 varible width 的話也是 float 。

    ReplyDelete
  4. 了解しました。
    ありがとうございます。

    ReplyDelete

Post a Comment