如何在同一行上保留兩個動態div，並強制單詞在右側換行

Question

我需要做的是將兩個動態div保持在同一水平線上，並強制最右側的div將單詞換行而不是移動到下一行。

我已經試過許多方法，如在此類似，但不完全相同，問題的：

Keep floating divs on same line

這裏是什麼，我想用我去掉了實驗方案非常簡化的版本（如使用表細胞，浮右右側DIV等）：

<div class='wrapper'> 
<div class='images'> 
    images 
</div> 
<div class='text'> 
    long text long text long text long text long text long text long text long text long text long text 
</div> 
</div> 

.images { 
    float:left; 
    border:1px solid black; 
    height: 200px; 
} 

.text { 
    float:left; 
    border:1px solid black; 
    position: relative; 
} 

.wrapper { 
} 

在這段代碼中，我需要對準正確地發生，即使JavaScript不加載所以回來並固定其與jQuery是不是選擇離子。兩個div都是動態的，它們可以根據用戶交互改變寬度。

如果第二個div中的文本不是太長，我可以得到兩個div對齊，但如果我縮小瀏覽器窗口直到它太緊，那麼第二個div跳到第二行。

我希望文本左對齊，所以第二個div文本應排列在第一個div的右側。

該divs也不是一樣的高度，也不是固定的高度，它可以非常依賴於頁面的內容。

很明顯，一種解決方案是使用表格標籤，但我希望避免這種情況，因爲表格通常不是最佳做法。

更新： 爲了完整起見，這裏是一個小提琴，它非常接近我的實際頁面格式 - 左邊的圖像，右邊的長文本和文本下的一堆按鈕。 https://jsfiddle.net/yyt0tkLr/目前我正試圖讓一堆按鈕顯示在單獨的行上，而不使用br標籤來完成。

Answer 1

任何你不能使用float作爲自然意圖的理由？

Fiddle demo

.images { 
 
    float:left; 
 
    border:1px solid black; 
 
    height: 200px; 
 
} 
 
.text { 
 
    border:1px solid black; 
 
    overflow: hidden; 
 
}

<div class='wrapper'> 
 
    <div class='text'> 
 
    <div class='images'>images</div> 
 

 
    long text long text long text long text long text long text long text long text long text long text</div> 
 
</div>

Answer 2

如果你給你的div的寬度屬性，這一切都在一起。如果沒有它，divs會相互碰撞，你會在另一個下包裝。

<div class='wrapper'> 
<div class='images'> 
    images 
</div> 
<div class='text'> 
    long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text 
</div> 
</div> 

.images { 
    float:left; 
    border:1px solid black; 
    height: 200px; 
    width:20%; 
} 

.text { 
    float:left; 
    border:1px solid black; 
    position: relative; 
    width:75% 
} 

.wrapper { 
} 

https://jsfiddle.net/Ls3bw80t/

Answer 3

你嘗試使用display:inline爲正確的DIV？

小提琴：http://jsfiddle.net/fe6yp0m1/

Answer 4

我認爲它使用的是使用其他float元素後，明確你的包裝將不低於有用做最好的和正確的方法是我做的方式，請

.images { 
    border:1px solid black; 
    height: 200px; 
    float:left; 
} 
.clear{ 
    clear:both; 
} 
.text { 
    display:inline;  
    border:1px solid black; 
} 

.wrapper { 
    border:1px solid black; 
} 

http://jsfiddle.net/Siddharth_Pandey/6vb4bkng/