CSS列：流體和寬度靈活

在2011年，我一直困惑着2列的佈局。我感到慚愧。 ;）CSS列：流體和寬度靈活

面臨的挑戰是要拿出這樣的：

+--------------------------------------++----------------+ 
| This is a header with potentially || button div  | 
|          ||    | 
| long text that will wrap most likely |+----------------+ 
|          | 
| but can't go under the button to the | 
|          | 
| right        | 
+--------------------------------------+

不是一個大不了的，你設置左邊欄的保證金爲等於右邊的DIV的一個典型的2列布局。然而，在這個特定的例子中，變量是我不知道在任何給定的時間右邊div有多寬（它基於一行文字會有所不同）。

總之，我需要：

一個2列布局
兩列佔用整個寬度
上右欄是一樣寬，它包含了左側
列中的文本是一樣寬的剩餘空間

看來我必須先建立這個，但我很難過。

我對CSS，JS或jQuery解決方案開放。

編輯：

其實，我已經可以看到一個相當簡單的jQuery解決方案。我可以在右邊抓住div的渲染寬度，然後從父容器的寬度減去該寬度，然後將左列的寬度設置爲相同。如果沒有乾淨的CSS選項，那將是我的後備計劃。

來源

2011-07-20 DA.

列的高度是否必須相等？你需要支持哪些瀏覽器？ – thirtydot

不...不需要等高度。瀏覽器支持...現在，讓我們只說webkit（有效的瀏覽器）。 –

參見：http://jsfiddle.net/vpADP/

它會在IE7 +和所有現代瀏覽器。

HTML：

<div id="buttonDiv">button div as wide as text</div> 
<div id="leftDiv"> 
    left div 
</div>

CSS：

#leftDiv { 
    overflow: hidden 
} 
#buttonDiv { 
    float: right 
}

這不是典型的使用overflow: hidden，read this for details。

來源

2011-07-20 00:10:18 thirtydot

輝煌！我不知道這種技術。那很棒。唯一挑剔的是它會顛倒標記中的內容流，但這是我可以在這個特定情況下愉快地生活的副作用。 –

是的，這是一個缺點。這種技術無法解決這個問題。 [This]（http://stackoverflow.com/questions/6483603/2-div-columns-fixed-and-liquid-fixed-one-must-be-removable-liquid-one-must-be）是那種當你嘗試時發生的瘋狂:) – thirtydot

我也需要這樣做，但需求顛倒了（左列優先，右列取得碎片）。我試圖搞亂小提琴，但我無法讓它工作。 – RTF

CSS列：流體和寬度靈活

回答

相關問題