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

我有两个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来做到这一点，这通常是一个更好的方法： 我怎样才能把一个input元素放在同一行上作为它的标签？

Answer 2

你可以使用calc（）函数的CSS。

演示： 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

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

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/

Answer 4

这是2017年，最好的方法是使用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> 

Answer 5

如果你可以把它们包装在一个容器<div>你可以使用定位来将左边的<div>锚定在left:0;right:250px ，参见这个演示 。 我现在要说，这在IE6中将不起作用，因为只有一个<div>一个angular落可以完全定位在页面上（ 请参阅此处以获取完整说明）。

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

希望这对你有用！

Answer 7

有很多方法可以完成，负利润率是我的最爱之一：

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

祝你好运！

Answer 8

设置你的权利，以特定的宽度和漂浮，在左侧设置边距右到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

使用简单这可以帮助你

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