Question

我已经足够使用CSS了，如果我有一定数量的列，我可以让列与内容一起工作：我只是在内容之前在HTML中定义侧边栏，并指定它们浮动到向左或向右，同时给内容一个左边缘或右边缘，使其不会流入侧边栏末端下方的空间。

我有一个新的挑战，其中列数可能因页面而异。在我的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">），我愿意接受建议同样。

Answer 1

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

根据固定宽度列的数量动态拉伸内容

1 个答案: