在div内浮动与表行

Question

我需要在div的左右边框放置两个重复的背景图像。我不知道div的宽度或高度。 我将左边框放在div中，然后将右边框浮动到右边。

这是我的布局： http://jsfiddle.net/WmLhV/

在Firefox中它可以正常工作，但在其他浏览器中，当浏览器窗口太短并且出现滚动条时，浮动消失。 正如您所看到的那样，容器是display：table-row。我不能改变这个或布局会打破... 有没有更好的方法将图像放到右边？即使没有浮动？

Answer 1

如果你想使用100％的高度你必须使用位置，右对齐的div没有高度。检查这个小提琴我是通过位置http://jsfiddle.net/WmLhV/4/

完成的

Answer 2

向右浮动的<div>没有高度。即使<div>的内容为空，但例如IE9没有，Firefox似乎也能理解100％的高度。

另一种方法是将<div>包含60px padding-left和60px padding-right的文字，然后将背景图像应用到其中（注意：多个背景图片仅适用于在CSS3友好的浏览器中）。填充本质上为您的背景图像创建了空白空间，并且始终与文本具有相同的高度。

另一个稍微复杂的方法是将内部区域划分为三个（左，中，右）和设置display: table-cell（或使用表格），然后基本上允许左边的高度并根据包含文本的中间单元格的高度调整右边的单元格。这将根据中间文本的高度---标准表行为揭示侧面的背景图像。这将摆脱浮子的需要。在IE6 / IE7中不支持display: table-cell，但普通的HTML表格可以正常工作。