css - 使用表格行在 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>空，Firefox 似乎也能理解 100% 的高度，但例如 IE9 就不能。

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

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