2012-06-17 104 views
0

我需要在div的左右邊界放置兩個重複的背景圖像。我不知道div的寬度或高度。 我雖然將左邊框放在div中,並將右邊框向右移動。浮動div行與錶行

這是我的佈局: http://jsfiddle.net/WmLhV/

在Firefox它工作正常,但在其他瀏覽器,在瀏覽器窗口太短,會出現一個滾動條,浮法消失。 正如你所看到的容器是顯示:錶行。我不能改變這個或佈局將打破... 有沒有更好的方式把圖像放在正確的位置?即使沒有浮動?

回答

0

你的<div>漂浮在右邊沒有高度。即使在<div>的內容爲空時,Firefox似乎也能理解100%的高度,但IE9並不是。

一種替代的方法是給你的<div>包含文本60像素padding-left和60像素padding-right,然後應用背景圖像給它(注:多背景圖片只在CSS3友好的瀏覽器上工作)。填充本質上爲您的背景圖像創建空白空間,並始終與文本具有相同的高度。另一個稍微更復雜的方法是將內部區域分成三個區域(左邊,中間,右邊)並設置爲display: table-cell(或使用表格),然後基本上允許左右單元格的高度根據包含文字的中間單元格的高度進行調整。這將根據中間文本的高度 - 標準表格行爲顯示兩側的背景圖像。這將擺脫對花車的需要。 IE6/IE7不支持display: table-cell,但是正常的HTML表格可以正常工作。

2

如果你想使用100%的高度,你必須使用位置,你的div與右對齊沒有高度。檢查這個小提琴我已經完成了這個位置http://jsfiddle.net/WmLhV/4/