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

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,你可以选择经典的"人造列"背景(参见列表中的示例)