Html 两个div，一个固定宽度，另一个，其余
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6487085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two divs, one fixed width, the other, the rest
提问by bear
I've got two div containers.
我有两个 div 容器。
Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?
虽然一个需要特定的宽度，但我需要调整它，以便另一个 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 -->回答by thirtydot
See:http://jsfiddle.net/SpSjL/(adjust the browser's width)
参见：http : //jsfiddle.net/SpSjL/ （调整浏览器的宽度）
HTML:
HTML：
<div class="right"></div>
<div class="left"></div>
CSS:
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;
}
You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?
您也可以使用display: table，这通常是一种更好的方法：如何将输入元素与其标签放在同一行？
回答by Evgeny
It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.
现在是 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>回答by Shivali Patel
You can use calc() Function of CSS.
您可以使用 CSS 的 calc() 函数。
Demo: http://jsfiddle.net/A8zLY/543/
演示：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;
}
Hope this will help you!!
希望能帮到你！！
回答by Brent
If you can flip the order in the source code, you can do it like this:
如果你可以翻转源代码中的顺序，你可以这样做：
HTML:
HTML：
<div class="right"></div> // needs to be 250px
<div class="left"></div>
CSS:
CSS：
.right {
width: 250px;
float: right;
}
An example: http://jsfiddle.net/blineberry/VHcPT/
一个例子：http: //jsfiddle.net/blineberry/VHcPT/
Add a container and you can do it with your current source code order and absolute positioning:
添加一个容器，您可以使用当前的源代码顺序和绝对定位来完成：
HTML:
HTML：
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
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;
}
Here, the .leftdiv gets an implicitly set width from the top, left, and rightstyles that allows it to fill the remaining space in #container.
在这里，.leftDIV从获得的隐式设置宽度top，left和right风格，允许它填补剩余空间#container。
回答by andyb
If you can wrap them in a container <div>you could use positioning to make the left <div>anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div>can be absolutely positioned on a page (see herefor full explanation).
如果您可以将它们包装在容器中，<div>您可以使用定位使左侧<div>锚定在left:0;right:250px，请参阅此演示。我现在要说的是，这在 IE6 中是行不通的，因为只有 a 的一个角<div>可以绝对定位在页面上（有关完整说明，请参见此处）。
回答by Oscar
1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width
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>
Hope this works for you!
希望这对你有用！
回答by baraboom
There are quite a few ways to accomplish, negative margins is one of my favorites:
有很多方法可以实现，负边距是我的最爱之一：
http://www.alistapart.com/articles/negativemargins/
http://www.alistapart.com/articles/negativemargins/
Good luck!
祝你好运！
回答by meteorainer
set your right to the specific width and float it, on your left just set the margin-right to 250px
将您的右侧设置为特定的宽度并将其浮动，在您的左侧，只需将 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
}
回答by meteorainer
If you need a cross browser solution, you can use my approach, clear and easy.
如果你需要一个跨浏览器的解决方案，你可以使用我的方法，简单明了。
.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;
}
回答by Hu?nh H?u ?n
Use the simple this can help you
使用简单的这可以帮助你
<table width="100%">
<tr>
<td width="200">fix width</td>
<td><div>ha ha, this is the rest!</div></td>
</tr>
</table>
