保持浮动的 div 元素在同一行上

Question

我该如何让两个元素在同一行，并保持右侧列固定大小？ 我希望右侧div具有固定大小，左侧列是流体的，但是当我在左侧插入长文本时，右侧会移动到下一列。

示例：http://jsfiddle.net/Jbbxk/2/ 是否有纯CSS解决方案？

注意！包装div必须具有动态宽度！ 为了演示目的，它具有固定宽度，因此将换行。

干杯！

- Kristian

---

你的包装器有一个固定的宽度。你期望什么？或者我漏掉了什么？溢出？ - PeeHaa

我的演示中的包装器具有固定宽度，但在我的应用程序中具有相对宽度（50％）。容器大小会发生变化。 - Kristian

Answer 1

这是实现你想要的一种常见方法：

.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;
}

说明：

• 流式布局中，左侧栏占据整个宽度，但通过使用 margin-right: [右侧栏宽度]; 为右侧栏保留空间。
• 固定右侧栏被放置在绝对位置上，top 0，right 0（其正确的位置）。
• 包含的 div 元素设置了 position: relative，以便于确定右侧栏相对于它的位置。

- pacha

---

这正是我正在寻找的！ - Kristian

Answer 2

其实比我想象的要简单，只需从左侧类别中删除float:left;并将右侧浮动项目放在HTML中它们上面即可。

更新 jsfiddle

- Andrew Morris

---

抱歉，@pacha 提供了更好的解决方案。 - Kristian

这是一个非常流畅的解决方案。然而，左侧列（流体列）的内容可能会在右侧列高度较短时出现在其下面，这可能是您想要的，也可能不是... - pacha

Answer 3

这里有另一种解决方案。设置display: table-cell;

http://jsfiddle.net/Jbbxk/54/

.left {
    /*display: left;*/
    display: table-cell;
}
.right {
    float: right;
    display: table-cell;
}

另外，浮动的div先出现：

<div class="right">
    &nbsp;
</div>
<div class="left">
    Looooooooong content - pushes right to next row<br>
    NOT OK
</div>

- Chloe

Answer 4

你可以这样做

.left {
    max-width: 152px;
}

- 32bitfloat

---

我认为这不会起作用，因为在他的样式表中，wrap div 的宽度是动态的。 - Billy Moat

@32bitfloat 是的，那只是为了演示，实际上在我的应用程序中它是50％，所以它在变化。 - Kristian

Answer 5

由于您具有动态宽度，请使用百分比符号，例如

.left {
float: left;
background-color: #CCC;
width:75%;
}

我已更新 jsfiddle 链接: http://jsfiddle.net/Jbbxk/6/

- Yasser Shaikh

---

不错，你理解了我的意思，但是这种方式当包装 div 是 500 像素时，div 之间会有很多空白空间。 - Kristian