CSS 你如何将两个 div 并排放置，以便它们填满可用空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4946074/
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
How do you put two divs next to each other so they fill up the available space
提问by Jan Thom?
I have two divs, the right one is 80px wide the other should fill up the remaining space. So far I tried:
我有两个 div，右边一个是 80px 宽，另一个应该填满剩余的空间。到目前为止，我尝试过：
<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#left {
position: relative;
margin-right: 80px;
background-color: red;
}
#right {
float: right;
position: relative;
text-align: left;
width: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</body>
</html>
However, the right box is always put below the left box and not right to it. I guess it is because of the margin. I also tried a margin-left: -80px on the right one but this doesnt seem to change anything. So how do I have to change the CSS so that the right div is in the same line as the left div?
但是，右侧框始终放在左侧框下方而不是右侧。我想这是因为保证金。我也尝试了一个 margin-left: -80px 在右边，但这似乎没有改变任何东西。那么我该如何更改 CSS 以使右侧的 div 与左侧的 div 位于同一行？
回答by Tim Cooper
Have the right divbefore the left.
有正确的div左侧前。
<div id="right">
Right
</div>
<div id="left">
Left
</div>
回答by Sterling Bourne
Alternatively, if you're looking for the LEFT div to remain at a static width and the RIGHT div to expand and contract with the size of the page, you'd use the following code:
或者，如果您要让 LEFT div 保持静态宽度，而让 RIGHT div 随页面大小扩展和收缩，则可以使用以下代码：
.left {
float: left;
position: relative;
width: 80px;
background-color: red;
}
.right {
position: relative;
text-align: left;
margin-left: 80px;
background-color: yellow;
}
And the HTML would be...
而 HTML 将是...
<div class="left">Left</div>
<div class="right">Right</div>
回答by Sang Suantak
That's because divis a block element, meaning it will always break the flow. What you can do is change both the div's displayto inlineand floatto left.
那是因为div是一个块元素，这意味着它总是会中断流程。你可以做的是改变两个div的display来inline和float到left。
回答by Sotiris
You can change the position:relative;of #rightto position:absolute;top:0;right:0;.
This will position the element in the right-top corner of its parent.
您可以更改position:relative;的#right到position:absolute;top:0;right:0;。这会将元素定位在其父元素的右上角。
Example: http://jsfiddle.net/WaQGW/
回答by denis.peplin
Nowadays it can be done with flex.
如今，它可以通过flex.
Set container's (bodyin this case) displayproperty to flex, then set width of left divto 100%.
将容器的（body在本例中）display属性flex设置为，然后将左侧的宽度设置div为100%。
body {
margin: 0;
padding: 0;
display: flex;
}
#left {
background-color: red;
width: 100%;
}
#right {
width: 80px;
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
</head>
<body>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</body>
</html>