歡迎使用HTML表格匿名

Hl，我的名字很好，我有問題。我只是忍不住用<table> s。我上癮了，這對我來說是一個問題。我需要一些支持，並且一些明智的網頁設計師向我展示我的方式錯誤。歡迎使用HTML表格匿名

2列布局

所以我想做一個簡單的兩分欄佈局：導航左側，內容上的權利。快速表，我很好去。

<table> 
    <tr> 
    <td valign="top"><!-- Navigation --></td> 
    <td valign="top"><!-- Content --></td> 
    </tr> 
</table>

對結果非常滿意。內容在頁面的流程中。我可以指定單元格的寬度，讓它們展開以填充空間，或縮小以適應內容。但是，一旦我開始介紹嵌套表格（當然，對於合法的表格數據）......標記變得醜陋難以閱讀和維護。此外，我所有的網頁設計師朋友都採用了名字稱呼。

那麼我有什麼選擇？我更喜歡position:absolute;。只需一點點的CSS ...

.left { position:absolute; top:0; bottom:0; left:0; width:200px; } 
.right { position:absolute; top:0; bottom:0; left:200px; right:0; }

...和最小的HTML標記...

<div class="left"><!-- Navigation --></div> 
<div class="right"><!-- Content --></div>

光滑！標記清晰，設計流暢。但是現在我試着在我的兩列下添加一些東西，然後碰到一個thorough mess (jsFiddle)。我不是在流動的網頁上工作，但我不知道我的內容會有多高！所以我不能指定高度。我輕鬆放棄...所以我們試試別的。

我會老實說：float嚇到我了。標記不明顯，浮動元素似乎有他們自己的想法，帶着險惡的動機在我的情況下毀掉我的設計。 Consider this jsfiddle.我還沒有在頁面的流程中工作。並且我想要使用流體內容進行靜態寬度導航？做什麼？

我不認識的人。這些表格似乎是一個更好的選擇。有人對我說一些道理。我可以再次使用...

我也這樣認爲。 –

回答這個問題：使用這個：http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm表格看起來很容易，少一點標記，但在渲染響應佈局方面，它們是邪惡的用於佈局。我使用了幾個，包括我鏈接的一個。 –

如果我明白你想要做的正確，我認爲你正在尋找overflow="auto"。 overflow屬性用於指定內容溢出元素的方框時發生的情況。

.more { 
background: rgba(0,255,0,.5); 
padding:10px; 
overflow: auto; 
}

這裏有一個工作示例：http://jsfiddle.net/MJaSD/

2012-09-13 04:34:13

回答