logo标签列表

两个 div，一个固定宽度，另一个占据剩余空间

csshtml
113

我有两个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 -->

4
不要使用十年前为古老的浏览器编写的技巧。向下滚动获取现代 flexbox 解决方案。 - Evgeny
2
在你跟随 Evgeny 的链接之前，请考虑你的用户实际使用的浏览器，而不是你希望他们使用的浏览器。Flexbox 在你教授的 IE 9 上不会呈现出良好的效果：https://caniuse.com/#feat=flexbox - duhaime
@duhaime IE9全球使用率为0.13%。 - Evgeny
所以在1千个用户中... - duhaime
10个回答
132

参见: 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 来实现，这通常是更好的方法：如何将输入元素放在其标签同一行？
4
无法正常工作。左侧宽度为100％，右侧为250像素，出现两行:( - bear
19
您需要交换div的顺序，就像我的答案和演示一样。先是right再是left。 - thirtydot
1
总的来说，这对我很有效，但有时当我在左侧div中有文本而不是换行到下一行（并且有空间）时，它会被截断在右侧（即右侧div开始的地方）。我该如何使文本在左侧div中换行？ - Guy
1
非浮动DIV不能填充整个宽度。 当内容高度大于浮动DIV或文本过长时，这是一个不好的想法。 - netAction
64

现在是2023年，使用flexbox是做到这一点的最佳方式，它与IE10+兼容。

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

1
你对这个问题的评论让我免去了尝试支持IE6的麻烦。谢谢！ - Mike Davlantes
这也不错，但是由于与IE9和Chrome 26的兼容性，calc()比flex更好。 - Don Dilanga
这对我很有效，甚至不需要定义.right宽度。 - Howard
1
让我感到痛心的是，在2017/2018/2019年，我们仍然会收到类似“当心IE 9”的评论。 - Mike Devenney
你也可以将右侧div的宽度设置为自动，例如“flex: 0 0 auto;”。 - d.i.joe
谢谢，这是对我有用的答案。 - mostafa.S
48
你可以使用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;   
}

希望这能帮到你！

谢谢建议。我检查了浏览器之间的兼容性，对于稳定使用来说相当高。 - Farside
1
这个答案应该被选为最佳答案，因为在这个答案中DIV标签没有像最佳答案中那样被交换。 - Don Dilanga
即使在其他Flexbox解决方案中也很有用，在我的情况下，由于React库/组件的某些嵌套不兼容Flexbox，所以非常有帮助。干杯！ - edencorbin
我为什么才发现 calc 这个工具呢？ - J.Warren
15
如果您可以翻转源代码中的顺序，就可以按如下方式进行操作：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 的填充即可看到效果。 - user3413723
1
第二个解决方案对我非常有效。太聪明了！ - user3413723
6
如果您可以将它们放入一个容器<div>中，您可以使用定位使左侧的<div>锚定在left:0;right:250px，请参见此演示。我现在要说的是，这在IE6中不起作用，因为一个<div>的只有一个角可以在页面上被绝对定位（在此处查看完整说明）。
3

1- 先建立一个包裹 Div，可以设置 padding 和 margin
2- 把左边的 Div 设置成需要的宽度，并且让它向左浮动
3- 把右边的 Div 的 margin 设为与左边的 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>

希望这对您有帮助！
1

将您的右边设置为特定宽度并浮动，对于您的左边，只需将margin-right设置为250像素。

.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。 - meteorainer
你有任何包装 div 的代码吗？我可以在线查看一些内容，还是这完全是本地的？ - meteorainer
它是完全本地的，不过让我试着把它放到 jsfiddle 上。 - bear
哈哈，你移除了float:right。另外，不要忘记考虑边框宽度，如果你打算保留它们，请从其中一个div的宽度中减去这些宽度。 - meteorainer
1
如果您需要一种跨浏览器的解决方案，您可以使用我的方法，它清晰易懂。
.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;
}
1
0

使用简单的方法可以帮助您

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接