Question

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

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

Answer 2

您可以使用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;   
}

希望这会对你有所帮助!!

Answer 3

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

Answer 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样式中隐式设置宽度，以便填充{{1}中的剩余空间}}

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

Answer 5

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

Answer 6

1-有一个包装div，根据需要设置填充和边距 2-使左侧划分您需要的宽度并使其向左浮动
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>

希望这适合你！

Answer 7

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

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

祝你好运！

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

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

Answer 10

使用简单的这可以帮助你

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

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

10 个答案: