將浮動div保持在同一行

Question

如何將兩個元素保持在固定右列的同一行中？ 我希望右側div具有固定大小，並且左列流體，但是當插入長文本到左側時，然后右側一個進入下一列。

示例： http ： //jsfiddle.net/Jbbxk/2/

有沒有純CSS解決方案？

NB！ 換行div必須有動態寬度！ 為了演示目的，它已經修復了，所以它將包裝。

干杯!

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: [right column width];
• 固定的右列位於頂部0，右側0（正確位置）的絕對位置
• wrap div被賦予position: relative因此根據它確定右列位置。

Answer 2

它實際上比我想象的要容易，只需移除浮子：左; 從左側的類中，將正確的浮動項放在HTML上面

更新小提琴

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>

Answer 4

你可以做

.left {
    max-width: 152px;
}

Answer 5

因為你有動態寬度，使用％like

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

我更新了小提琴鏈接： http ： //jsfiddle.net/Jbbxk/6/