CSS - 并排浮动两个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7168442/
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
CSS - Floating two elements side by side
提问by dev.e.loper
I have two divs side by side. I want div that is on left hand side to take up as much room as it needs without pushing the other div (on right) to next line.
我有两个并排的div。我希望左侧的 div 占用尽可能多的空间，而无需将另一个 div（右侧）推到下一行。
Here is what I have right now: http://jsfiddle.net/RALza/
这是我现在所拥有的：http: //jsfiddle.net/RALza/
HTML
HTML
<div id="container">
<div id="divA"> left text </div>
<div id="divB"> right text </div>
</div>
CSS
CSS
#divA
{
float:left;
border:1px solid blue;
width:100%;
}
#divB
{
float:right;
border:1px solid red;
}
采纳答案by MatTheCat
<div id="container">
<div id="divB"> right text </div>
<div id="divA"> left text </div>
</div>
#divA
{
overflow:auto;
border:1px solid blue;
}
#divB
{
float:right;
border:1px solid red;
}
will work.
将工作。
But you should specify width of floating elements.
但是您应该指定浮动元素的宽度。
回答by Aleksandr
You can use CSS flexible boxes:
您可以使用 CSS 弹性框：
#container {
display: flex;
justify-content: space-between;
}<div id="container">
<div id="divA">left text</div>
<div id="divB">right text</div>
</div>回答by Alp
Try this fiddle: http://jsfiddle.net/RALza/6/
试试这个小提琴：http: //jsfiddle.net/RALza/6/
It works by changing the order of the two divs and making the first div a normal block element without a float.
它通过改变两个 div 的顺序并使第一个 div 成为没有浮动的普通块元素来工作。
<div id="container">
<div id="divB"> right text </div>
<div id="divA"> left text </div>
</div>
and
和
#divA
{
border:1px solid blue;
}
#divB
{
float:right;
border:1px solid red;
}
