Question

我目前有一个宽度为div的div：自动填充整个屏幕宽度，但我想在右侧放置一个侧边栏。当我浮动宽度时：自动div向左，固定宽度div向右，而是向下移动。我基本上都在寻找与reddit类似的东西，在右边的搜索栏上，内容自动调整到页面宽度。感谢

Answer 1

你可以这样：

假设您在父容器中有这两个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的宽度），因此其内容不会超出该点。反过来，右侧col具有-200px的边距，因此它强制父级填充所施加的边界并且始终位于最右侧。实际上，另一个div现在只有父容器提供的空间，受其填充限制，所以它的100％实际上是（100％ - （父级填充））。您可以在此处查看此工作结果：jsfiddle.

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

如果你想提供一个背景，比如2个cols，你可以选择经典的“人造列”背景（见a list apart上的例子）

Answer 2

您不需要严格的容器div。我为了简洁而做了内联。

<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>

Answer 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;
}

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

3 个答案: