在div中使用table-row进行浮动

Question

我需要在一个div的左边框和右边框上放置两个重复的背景图像。我不知道div的宽度或高度。我想把左边的边框放在div中，把右边的边框放在右边。

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

在火狐中，它可以正常工作，但在其他浏览器中，当浏览器窗口太短，出现滚动条时，浮动就会消失。正如您所看到的，容器是display: table-row。我不能改变这一点，否则布局会被破坏...有没有更好的方法把图片放到右边？即使没有浮动也行吗？

Answer 1

向右浮动的<div>没有高度。即使<div>的内容是空的，火狐似乎也能理解100%的高度，而IE9就不能。

一种替代方法是给包含文本60px padding-left和60px padding-right的<div>，然后对其应用背景图像(注意:多个背景图像只能在对css3友好的浏览器中使用)。填充实质上为背景图像创建了空白空间，并且始终具有与文本相同的高度。

另一种更复杂的方法是将内部区域划分为三个区域(左、中、右)并设置display: table-cell (或使用表格)，然后基本上允许左右单元格的高度根据包含文本的中间单元格的高度进行调整。这将根据中间文本的高度显示侧面的背景图像-标准的表格行为。这将消除对浮点数的需求。display: table-cell在IE6/IE7中不受支持，但是一个普通的HTML表就可以了。

Answer 2

右对齐的div没有高度，如果你想使用100%的高度，你必须使用position。检查这个小提琴我已经通过position http://jsfiddle.net/WmLhV/4/完成了