4

我有一个问题在我看过的各种 CSS 布局模型中没有找到，所以我想我会在这里发布。

我正在一个使用基本流体/固定两列布局的站点上工作。该站点的内容在左侧 div 中，在右侧的侧边栏中。侧边栏固定宽度为 200 像素左右，内容扩展填充父级的剩余宽度。

代码如下所示：

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
   <div style="margin-right: 200px;">Content goes here.</div>
   <div style="float: right; width: 200px;">Menus goes here.</div>
   <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

这是一种非常标准的方法，并且在大多数情况下都可以正常工作，但问题是网站的设计要求侧边栏仅在某些情况下出现。所有的 HTML 都是通过 PHP 生成的，“get-content()”函数不知道“get-sidebar()”函数是否会被调用。

当侧边栏被调用时，我希望内容展开以填充父 div，同时为侧边栏留出足够的空间。如果没有侧边栏，则内容应展开以填充父级的整个宽度。

有没有办法用 CSS 做到这一点——也许使用“自动”作为内容边距——而不依赖于 PHP/JavaScript？

4

3 回答 3

2

你可以考虑这样做：

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
    <div style="background-color:#CCC;height:100%;">
        <div style="background-color:#444;float: right; width: 200px;height:100%;">Menus goes here.</div>
        Content goes here.
    </div>
    <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

通过这样做，菜单位于主 div 内并且没有边距，所以当菜单消失时，文本会扩展以填充空间。

“身高：100%；” 确保菜单和内容框拉伸到相同的高度。如果需要，您还可以将其设置为像素或 em 数量或小于 100 的百分比。

于 2009-10-02T17:47:07.787 回答
0

而不是浮动侧边栏，试试这个：

#sidebar {
  display: inline-block;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}
于 2009-09-27T17:26:02.310 回答
0

是否可以使用 PHP 向正文添加一个类？根据上下文，类似“one-col”或“two-col”的东西。然后你可以在有侧边栏时给内容 div 一个边距，但在没有侧边栏时不能。

于 2009-09-28T15:27:57.980 回答