根據固定寬度列的數量動態地擴展內容

我已經使用過CSS了，如果我擁有一定數量的列，我可以使列與內容一起工作：我只需在HTML中定義邊欄（s）在內容之前，並指定它們向左或向右浮動，同時給內容留下一個空白或左側的空白，以使其不會流入側欄末端以下的空間。根據固定寬度列的數量動態地擴展內容

雖然我有一個新的挑戰，即列數可能因頁面而異。在我的HTML中，我不想在主頁面內容之前指定邊欄內容，這是我知道如何去做的唯一方法。

從本質上講，我想的HTML看起來像這樣：

<div id="container"> 
    <div id="content"> 
     <!-- Main body content goes here. --> 
    </div> 
    <div class="sidebar"> 
     <!-- Sidebar DIV should appear to the right of the content DIV. --> 
    </div> 
    <div class="sidebar"> 
     <!-- 
      Another sidebar DIV, with this one *preferably* appearing to the 
      right of the one above, since it appears lower in the code and is 
      assuming LTR. I'm open to CSS that makes this sidebar appear to 
      the left instead of the right, however. 
     --> 
    </div> 
    <!-- Any number of additional sidebar DIV's can appear here. --> 
</div>

我不知道我是否應該嘗試浮在內容/側邊欄DIV的，讓他們的位置是絕對的，指定的寬度等。使用可變數量的側邊欄自動拉伸內容。值得注意的是，每個側邊欄的大小將保持不變。

div.sidebar { 
    width: 100px; 
}

最後再提一下：如果有改善，我可以做的HTML，這將有助於（例如：周圍所有的側邊欄DIV元素在父DIV如<div id="sidebars">），我很開放的建議有以及。

來源

2009-12-02 Matt Huggins

我想我必須接受這個事實，即這需要HTML表格，因爲沒有人可以爲此提供CSS解決方案。

來源

2009-12-03 21:35:35

根據固定寬度列的數量動態地擴展內容

回答

相關問題