float 基本版面的構造 之前有提過, 未使用 float 的預設版面, 內容元素的區塊會依原始碼的順序, 由上而下縱向顯示。而設定了 float 的區塊, 則會跳脫預設的區塊配置方式, 由左而右浮動(float)排列。  製作二欄式版面 要製作最簡單的二欄式版面, 是在設定各欄的 width 後, 左欄設定「float: left;」, 右欄設定「float: right;」, 並在其後的元素上設定「clear: both;」解除 float 的效果。 請參照範例程式 2col.html 的標記順序製作二欄式版面。 二欄式版面的構造 設定各區塊的寬度及底色 首先設定各區塊的 width。為了讓區塊位置一目瞭然, 這裡先設定暫用底色。   這裡設定暫用底色, 若出現顯示結果錯位的時候, 可以很快找出問題。 .......﹝詳細內容﹞ 更多內容請見 《 HTML5•CSS3 最強圖解實戰講座 》  |