響應式佈局

我目前正在創建部分響應式佈局模板（用於平板電腦和桌面）。我在以像素和百分比表示寬度方面存在問題。響應式佈局

我有2個主要列 - 讓我們稱這些列左和右。

我已經把LEFT列的固定寬度，因爲我需要一個固定的寬度（約500px）。

我希望RIGHT列「向左浮動」，並使用盡可能多的空間，因爲它可以使用它的外部容器。我希望RIGHT塊根據屏幕尺寸的變化做出響應。

兩列均向左浮動。

如果我的LEFT列左移，並且寬度爲500px，並且RIGHT列向左浮動但沒有寬度，此方法運行良好。 RIGHT的內容儘可能簡單地延伸，然後漂浮在LEFT旁邊。

當我將瀏覽器調整爲更小的寬度時，RIGHT塊內的內容（例如一長串文本）應該實際上向左浮動，並讓任何文本包裝成兩行或多行。但是，文本不會換行，而是整個RIGHT列自然落在LEFT列下方的底部，因爲它的內容對於較小的屏幕尺寸而言太寬。這很自然，我想我們都知道這個問題。在一個固定寬度的佈局中，你總是會給RIGHT列賦予一個WIDTH。但是，現在我試圖脫離而沒有指定寬度，但由於列落到底部，所以這看起來並不正確。

如：一些文字一些文字

請幫助/建議我來解決上述問題。有沒有解決方案？

來源

2013-05-31 thushanth

這樣的事情怎麼樣http://jsfiddle.net/TZrw7/。將#right元素的溢出設置爲隱藏狀態，即可。

#left 
{ 
    width: 500px; 
    float: left; 
    border: 2px solid #f0f 
} 

#right 
{ 
    overflow:hidden; 
    border: 2px solid #00f 
}

來源

2013-05-31 13:57:48 ezekielDFM

您可以使用display:table和display:table-cell迫使他們執行您想要的方式，然後定型下來移動時刪除這些樣式。這是我爲有類似問題的人制作的jsfiddle。

http://jsfiddle.net/hp8Vg/1/

來源

2013-05-31 16:12:47

回答

相關問題