两个 div，一个固定宽度，另一个，其余的答案

【问题标题】：Two divs, one fixed width, the other, the rest两个 div，一个固定宽度，另一个，其余的
【发布时间】：2011-09-23 03:29:01
【问题描述】：

我有两个 div 容器。

虽然需要一个特定的宽度，但我需要调整它，以便另一个 div 占据其余空间。有什么办法可以做到吗？

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

【问题讨论】：

不要对古老的浏览器使用十年前的黑客攻击。向下滚动查看现代 flexbox 解决方案。
在您关注 Evgeny 的链接之前，请考虑您的用户实际使用的浏览器，而不是您希望他们使用的浏览器。 Flexbox 不会在你教授的 IE 9 上很好地渲染：caniuse.com/#feat=flexbox
@duhaime IE9 的全球使用率为 0.13%
所以千分之一的用户...

标签： css html

【解决方案1】：

见：http://jsfiddle.net/SpSjL/（调整浏览器的宽度）

HTML：

<div class="right"></div>
<div class="left"></div>

CSS：

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

您也可以使用display: table，这通常是更好的方法：How can I put an input element on the same line as its label?

【讨论】：

它不适合我。左边是 100% 宽度，右边是 250px。两行:(
您需要交换divs 的顺序，就像在我的回答和演示中一样。 right 然后left。
总的来说，这对我有用，但有时当我在左侧 div 中有文本而不是换行到下一行（并且有空格）时，它只是在右侧（右侧 div 开始的地方）被切断）。如何使文本在左侧 div 中换行？
非浮动 DIV 填充整个宽度。当内容高于浮动 DIV 或文本太长时，这是个坏主意。

【解决方案2】：

现在是 2017 年，最好的方法是使用 flexbox，即IE10+ compatible。

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

【讨论】：

您对该问题的评论使我免于尝试支持 IE6。谢谢！
这个也不错，但是由于兼容IE9和Chrome 26，calc()比flex好很多。
这对我来说效果很好。甚至不需要定义 .right 宽度。
在 2017/2018/2019 年我们仍然会收到类似于 BEWARE OF IE 9 的 cmets。
你也可以设置右边div的宽度为auto，比如"flex: 0 0 auto;"。

【解决方案3】：

你可以使用 CSS 的 calc() 函数。

演示：http://jsfiddle.net/A8zLY/543/

<div class="left"></div>
<div class="right"></div>

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

希望对你有帮助！！

【讨论】：

感谢您的建议。我检查了浏览器之间的兼容性，it's kind of high for stable usage
这应该被选为最佳答案，因为在这个答案中，DIV 标签没有像最佳答案中那样交换。
即使与其他 flexbox 解决方案一起使用也很有帮助，在我的情况下，由于 flex 盒在某个反应库/组件的嵌套中不兼容，干杯。
为什么我才发现calc!?

【解决方案4】：

如果你可以在源代码中翻转顺序，你可以这样做：

HTML：

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS：

.right {
  width: 250px;
  float: right;
}

一个例子：http://jsfiddle.net/blineberry/VHcPT/

添加一个容器，你可以用你当前的源代码顺序和绝对定位来做：

HTML：

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS：

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

这里，.left div 从top、left 和right 样式中获取了一个隐式设置的宽度，允许它填充#container 中的剩余空间。

示例：http://jsfiddle.net/blineberry/VHcPT/3/

【讨论】：

第一个例子似乎并没有真正起作用。 jsFiddle 中的 .left div 实际上是屏幕的全宽。如果两个 div 的高度相同，那就太好了，但在这种情况下，只需向 .left 添加 5px 填充，您就会看到。
第二种解决方案对我来说效果很好。天才！

【解决方案5】：

如果您可以将它们包装在容器<div> 中，您可以使用定位使左侧<div> 锚定在left:0;right:250px，请参阅this demo。我现在要说的是，这在 IE6 中不起作用，因为<div> 只有一个角可以绝对定位在页面上（see here 以获得完整解释）。

【讨论】：

【解决方案6】：

1- 有一个包装 div，根据需要设置填充和边距
2- 将左侧 div 设为您需要的宽度并使其向左浮动
3- 将右侧 div 边距设置为等于左侧宽度

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

    <div class="right" >
        ...
    </div>

</div>

希望这对你有用！

【讨论】：

【解决方案7】：

有很多方法可以完成，负边距是我的最爱之一：

http://www.alistapart.com/articles/negativemargins/

祝你好运！

【讨论】：

【解决方案8】：

将您的右侧设置为特定宽度并将其浮动，在您的左侧只需将 margin-right 设置为 250px

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

【讨论】：

杀死 .right 中的显示类型，并确保您在任何会影响 .left 的地方都没有明确的设置
你有任何类型的包装 div 吗？网上有什么我可以去检查的吗？还是这完全是本地的？
完全是本地的，不过，让我试着把它放在 jsfiddle 上。
哈哈，你删除了你的浮动：对。另外，不要忘记考虑边框宽度，因此如果您要保留这些宽度，请从 div 宽度之一中减去宽度。

【解决方案9】：

如果你需要跨浏览器的解决方案，可以使用我的方法，简洁明了。

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

【讨论】：

【解决方案10】：

使用简单的this可以帮助你

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>

【讨论】：