1

我有一个“容器”，里面有一个或两个 div：想想“内容区域”和可选的“侧边栏”。

侧边栏在右侧，内容区域在左侧。当侧边栏出现时，它是固定宽度。

如何缩小内容容器以在不使用 JavaScript 的情况下保持列并排，并且无需在 html 中即时添加额外的标签或样式？

这是基本代码：

<div id='container'>
   <div id='content-area'> ... </div>
   <div id='sidebar' style='width: 200px;'> ...</div>
</div>

我尝试简单地将一个浮动到左侧，另一个浮动到右侧，但在这种情况下，内容仍然保持全宽，并且一旦离开侧边栏就会被布置。

如果我知道侧边栏将出现在哪些页面上，我可以给容器一个类（仅在那些页面上）并给类一个固定的宽度。但我不知道侧边栏会出现在哪些页面上！

4

2 回答 2

4

通过使用 CSS相邻兄弟选择器 #sidebar + #content-area，如果容器中仅存在侧边栏，您可以定位内容区域并为其应用右边距：

这里的例子

#sidebar { float: right; width: 200px; }

#sidebar + #content-area {
  margin-right: 200px; /* equal to the width of the sidebar */
}

5.7 相邻兄弟选择器

相邻的兄弟选择器具有以下语法：E1 + E2，其中 E2是选择器的主题。选择器匹配 ifE1并 E2在文档树中共享相同的父级并E1紧接在 之前E2，忽略非元素节点（例如文本节点和注释）。

在这种情况下，您必须按如下方式重新排序元素：

<div id="container">
    <div id="sidebar"> This is the sidebar </div>
    <div id="content-area"> This is the content. </div>
</div>

或者，您可以通过建立块格式化上下文来防止内容区域与浮动侧边栏的边距框重叠。

CSS 2 级规范说明：

表格的边框框、块级替换元素或建立新块格式化上下文的正常流中的元素（例如具有'overflow' 而非 'visible'的元素）不得与边缘框重叠any 浮动在与元素本身相同的块格式化上下文中。

因此，通过为内容区域overflow-x提供一个值为hidden（例如）的属性，它会缩小到浮动到右侧的侧边栏的左侧。

这里的例子

#content-area { overflow-x: hidden; }
#sidebar { float: right; width: 200px; }
于 2013-08-10T07:50:36.793 回答
0

您可以使用简单的 css 来完成它，它适用于您的所有页面，包括 siebar 和没有侧边栏

HTML：首先是侧边栏，然后是内容区域（无论侧边栏应该在左边还是右边）

<div id='container'>
   <div id='sidebar' style='width: 200px;'> ...</div>
   <div id='content-area'> ... </div>
</div>

CSS：

#content-area{
   overflow-x: hidden;
}
#sidebar{
   float:right;
}

float: left如果您希望它位于左侧，请提供#sidebar

笔记：

  • 如果您在页面中包含侧边栏，它将占用 200 像素的宽度，而内容区域将占用其余的宽度。
  • 在您不包含侧边栏的页面中，内容区域将占据整个宽度。

希望这就是你要找的。

于 2013-08-10T07:47:54.430 回答