保持同一行上的浮動div

如何將兩個元素保留在固定右列的同一行中？我想正確的股利與固定的大小，並左列流體，但是當插入長文本向左一個，然後右擊一個進入到下一列..保持同一行上的浮動div

例子：http://jsfiddle.net/Jbbxk/2/

有什麼純CSS的解決方案？

注意！換行div必須有動態寬度！ 出於演示的目的，它已經固定witdh，所以它會包裝。

乾杯！

來源

2012-07-12 Kristian

您的包裝有一個固定的寬度。你能指望什麼？？？或者我錯過了什麼？溢出？ – PeeHaa 2012-07-12 11:39:29

演示中的包裝具有固定寬度，但在我的應用中具有相對寬度（50％）。一個容器大小的變化 – Kristian 2012-07-12 11:47:02

這是你想要做什麼的一個常見方式：

.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（它的正確位置）
的渦卷DIV分配position: relative所以右列位置根據它確定的。

來源

2012-07-12 12:02:04 pacha

這就是我正在尋找的東西！ – Kristian 2012-07-12 12:06:09

你可以做

.left { 
    max-width: 152px; 
}

來源

2012-07-12 11:39:50 32bitfloat

我認爲這不會像他的樣式表中那樣工作，它說包裝div的寬度是動態的。 – 2012-07-12 11:43:32

@ 32bitfloat是的，這是爲了演示，實際上在我的應用程序中它是50％，所以它的變化 – Kristian 2012-07-12 11:48:01

你有力度的寬度，使用％喜歡

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

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

來源

2012-07-12 11:46:04 Yasser

不錯，你沒有理解我想要什麼，但這種方式時，包裝div是500px有很多divs之間的空白 – Kristian 2012-07-12 11:52:00

它比我想象的其實更容易，只是刪除浮點數：left;從左邊類，並把你的右手上面漂浮着他們的項目在HTML

update fiddle

來源

2012-07-12 11:57:16

工程就像一個魅力！謝謝！ – Kristian 2012-07-12 11:59:06

Sry，更好的解決方案@pacha – Kristian 2012-07-12 12:06:33

這是一個非常流暢的解決方案。然而，當右邊一列的高度較短時（可能是也可能不是你想要的），左列（流體一列）的內容可能會在右邊一列結束...... – pacha 2012-07-12 12:10:55

這是另一種解決方案。設置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>

來源

2014-04-21 04:58:04 Chloe

保持同一行上的浮動div

回答

相關問題