Html 将浮动 div 保持在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11450962/
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
Keep floating divs on same line
提问by Kristian
How do i keep two elements in the same row with fixed right column? I want right div to be with fixed size, and left column fluid, but when in insert long text to left one, then right one goes to the next column..
如何将两个元素保持在同一行中并固定右列？我希望右 div 具有固定大小，左列流体，但是当在左侧插入长文本时，右侧的文本会转到下一列..
Example: http://jsfiddle.net/Jbbxk/2/
示例：http: //jsfiddle.net/Jbbxk/2/
Is there any pure CSS solutions?
有没有纯 CSS 解决方案？
NB! Wrap div must have dynamic width!For demostration purposes it has fixed witdh, so it will wrap.
注意！Wrap div 必须有动态宽度！出于演示目的，它已固定 witdh，因此它将环绕。
Cheers!
干杯!
回答by pacha
This is one common way of doing what you want:
这是做你想做的事情的一种常见方式：
.wrap {
position: relative;
margin: 5px;
border: 1px solid red;
}
.left {
float: left;
background-color: #CCC;
margin-right: 48px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 48px;
background-color: #888;
}
Explanation:
解释：
- The fluid left columnfills the whole width but saves space for the right column with
margin-right: [right column width]; - The fixed right columnis placed at an absolute position at top 0, right 0 (its correct place)
- The wrap divis assigned
position: relativeso the right column position is determined according to it.
- 该流体左边栏填满整个宽度而是右侧立柱与节省空间
margin-right: [right column width]; - 所述固定右列被放置在一个绝对位置在顶部0，右0（它的正确位置）
- 所述涡卷的div被分配
position: relative，以便右列位置根据它确定的。
回答by Andrew Morris
It's actually easier than I thought, just remove the float:left; from the left class and put your right floating items above them in the HTML
它实际上比我想象的要容易，只需删除 float:left; 从左边的类中，将右边的浮动项放在 HTML 中
回答by Chloe
Here is another solution. Set display: table-cell;
这是另一种解决方案。放display: table-cell;
.left {
/*display: left;*/
display: table-cell;
}
.right {
float: right;
display: table-cell;
}
Also, the floating div comes first:
此外，浮动 div 首先出现：
<div class="right">
</div>
<div class="left">
Looooooooong content - pushes right to next row<br>
NOT OK
</div>
回答by 32bitfloat
You can do
你可以做
.left {
max-width: 152px;
}
回答by Yasser Shaikh
as you have dynamics width, use % like
由于您有动态宽度，请使用 % like
.left {
float: left;
background-color: #CCC;
width:75%;
}
I have updated the fiddle link : http://jsfiddle.net/Jbbxk/6/
我已经更新了小提琴链接：http: //jsfiddle.net/Jbbxk/6/
