根据固定宽度列的数量动态地扩展内容

我已经使用过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

根据固定宽度列的数量动态地扩展内容

回答

相关问题