css - 根据固定宽度列的数量动态拉伸(stretch)内容

Question

我对 CSS 的使用已经足够多了，如果我有一定数量的列，我可以让列与内容一起工作:我只是在内容之前在 HTML 中定义侧边栏，并指定它们 float 到左边或右边，同时给内容一个 margin-left 或 -right，这样它就不会流入侧边栏末端下方的空间。

不过，我遇到了一个新挑战，即列数可能因页面而异。在我的 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>

我不确定我是否应该尝试 float 内容/侧边栏 DIV，使它们绝对定位，指定宽度等，以使内容随着侧边栏的可变数量自动拉伸(stretch)。可能值得注意的是，每个侧边栏的大小将保持不变。

div.sidebar {
    width: 100px;
}

最后一点:如果我可以对 HTML 进行改进(例如:围绕父 DIV 中的所有侧边栏 DIV 元素，例如 <div id="sidebars"> )，我也愿意接受建议.

Answer 1

我想我必须接受这样一个事实，即这需要 HTML 表格，因为没有人可以为此提供 CSS 解决方案。