如果存在浮动侧边栏，则缩小内容div以保持并排

Question

我有一个'容器'，里面有一个或两个div：想想'内容区'可选'侧边栏'。

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

如何在不使用JavaScript的情况下缩小内容容器以保持列并排，并且无需动态地在html中添加其他标记或样式？

以下是基本代码：

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

我试过简单地将一个浮动到左边，另一个放在右边，但是在这种情况下，内容仍保留全宽，并且在侧边栏清除后布局。

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

Answer 1

通过使用CSS adjacent sibling selector #sidebar + #content-area，如果只有容器中存在侧边栏，您可以定位内容区域并为其应用右边距：

<强> EXAMPLE HERE

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

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

  

<强> 5.7 Adjacent sibling selectors

     

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

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

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

---

或者，您可以通过建立overlapping the margin box of the floated sidebar来阻止内容区域block formatting context。

CSS第2级规范sates：

  

表的边框，块级替换元素或   正常流程中的元素，用于建立新的块格式   上下文（例如'溢出'除'可见'之外的元素）必须   不与同一块格式中任何浮点数的边距框重叠   上下文作为元素本身。

因此，通过为内容区域提供值为hidden的{​​{3}}属性（例如），它将缩小到侧边栏的左侧，该侧边栏浮动到右侧。

<强> overflow-x

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

Answer 2

你可以使用简单的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;
}

如果您希望它在左侧，则为#sidebar提供float: left

注意：

• 如果在页面中包含侧边栏，则宽度将为200px，内容区域将占据宽度的其余部分。
• 在不包含侧边栏的页面中，内容区域将占据全宽。

希望这就是你要找的东西。