流體容器，流體固定流體內部佈局

我試圖找到解決我在標題中提到的問題，但無濟於事。流體容器，流體固定流體內部佈局

基本上，我有三個內部元件（一個固定寬度<img>元件，流體寬度<textarea>，一個固定寬度<button>）的流體<div>容器。

我已經嘗試了一些負邊距但沒有運氣的東西。 <textarea>的長度將始終觸發按鈕在下方環繞。

我已經添加了幾張照片，以更好地描述我想要什麼： screenshot with lower window width

和

screenshot with larger window width

編輯：概括起來講，我想有元素'覆蓋'該區域而不包裹。

此外，我想避免的JavaScript 調整聽衆做到這一點。只有純CSS。

來源

2013-10-07 Zubzob

試着做一個你已經完成的[jsFiddle]（http://jsfiddle.net/） – Brewal

添加一個最小寬度到fliud容器，否則當窗口很小時容器佔用窗口的寬度（如果它是100％），所以內部的元件不適合容器。 – Froxz

您可以通過使用百分比來實現：僅用作示例的id或類。

<div id="fluidwrapper" style="width:100%;"> 
    <div id="imagewrapper" style="float:left;width:100px;"> 
     <img>noimg</img> 
    </div> 
    <div id="textandbuttonwrapper" style="width:40%;white-space:nowrap;"> 
     <textarea style="width:80%;"></textarea> 
     <button style="width:20%;">button</button> <!-- okay that is not fixed at all --> 
    </div> 
</div>

white-space：nowrap其實是你在尋找的東西，我猜。我希望它有幫助。

來源

2013-10-07 15:06:20 user2853437

我不知道這是如何解決我的問題。 textarea不會擴展到足以使所有這三個元素都填充該區域（如圖中所示），並且會在某些分辨率下破解（好吧，它不會換行但會破壞）。我編輯了我的問題以更好地反映這一點。 – Zubzob

我在發佈之前測試了代碼，並且textarea始終延伸。確保佈局會以非常小的分辨率破解，但是因此您可以使用媒體查詢（例如http://css-tricks.com/css-media-queries/）。另外，您可以爲buttontag提供流量權限，以便它始終保持不變在那裏，所以你可以防止分頁。 – user2853437

流體容器，流體固定流體內部佈局

回答

相關問題