如何在自动宽度 div 旁边添加固定宽度的 div？答案

【问题标题】：How to add a fixed width div next to an auto width div?如何在自动宽度 div 旁边添加固定宽度的 div？
【发布时间】：2011-06-14 18:15:23
【问题描述】：

我目前有一个带有 width:auto 的 div 来填充整个屏幕宽度，但我想在右侧放置一个侧边栏。当我将 width:auto div 向左浮动并将宽度 div 向右浮动时，它会改为下方。我基本上是在寻找类似于 reddit 的东西，在右侧宽度的搜索栏中，内容会自动调整到页面宽度。谢谢

【问题讨论】：

标签： css html

【解决方案1】：

你可以这样：

假设您在父容器中有这 2 个 div，它会展开以适应页面：

<div id="container">

    <div id="autowidth">text expands her...</div>

    <div id="fixed">This is a fixed column</div>

</div>

在您的 CSS 中：

#container {
    width:100%;
    border:1px solid black;
    padding-right:200px;
}

#autowidth{
    width:100%;
    background-color:red;
    float:left;
}
#fixed{
    width:200px;
    background-color:green;
    float:right;
    margin-right:-200px;
}

基本上，父容器将所有东西放在一起。它有 200px 的填充（右列的宽度），因此它的内容不会超出该点。反过来，右边的 col 有 -200px 的边距，因此它强制由父填充强加的边界并将自己始终放置在最右边。实际上，另一个 div 现在只有父容器提供的空间，受其填充限制，所以它的 100% 实际上是 (100% - (父填充))。你可以在这里看到这个的工作结果：jsfiddle.

我很确定可能会有更优雅的解决方案，所以请耐心等待。

如果你想给出一个背景，比如 2 列，你可以选择经典的“人造列”背景（参见 a list apart 的示例）

【讨论】：

@Lee Jacobson 如果我误解了您的问题或者您需要更多帮助，请 lmk
这在 Chrome、Firefox 和 IE9 中对我有用除了 你不应该为容器设置宽度，当我这样做时它比可用的水平屏幕空间和水平滚动出现。
只要你指定了border-box box-model，这在IE8和IE7中也可以工作！我刚刚测试了它。如果要针对 IE7，则必须获取 boxsizing.htc hack 脚本。 -webkit-box-sizing：边框框； -moz-box-sizing：边框框； box-sizing：边框框； *行为：url(/scripts/boxsizing.htc);
哇哦！我不知道为什么我以前从来没有这样做过。干得好。
小提琴在 chrome 59 中坏了。在我将 box-sizing:border box 添加到 *. jsfiddle.net/bfTDG/268

【解决方案2】：

您并不需要一个容器 div。为了简洁起见，我做了 css inline。

<div style="float:right; width:14em; background-color:#CCC;">
    <p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
    <p>This div is auto-width.</p>
</div>

【讨论】：

【解决方案3】：

答案对我不起作用，我认为它已经过时了。现在您必须指定 box-sizing:border-box 用于填充以计算宽度，但感谢您的灵感。这是我的解决方案。

#autowidth {
  float:left;
  width:100%;
  padding-right:200px;
  box-sizing:border-box;
}

#fixed {
  float:right;
  width:200px;
  margin-left:-200px;
}

【讨论】：