【发布时间】：2010-12-23 07:07:05
【问题描述】：
在两列模板中，当两列高度不同时，如何在每列重复使用背景？
例如，如果我的第 1 列高度为 200 像素（加载一些动态内容后），第 2 列高度为 500 像素，则第 1 列背景根据 200 像素高度显示，第 2 列背景根据 500 像素显示，但我想要两列背景为500px。
注意：由于要加载的动态内容，高度可能会有所不同。
【问题讨论】：
标签： css
【发布时间】：2010-12-23 07:07:05
【问题描述】：
啊，等高的列。您可以在网上找到数十种使用 JavaScript、CSS、图像等的技术，它们都取得了不同程度的成功。
我是假列的粉丝，其中您有一个背景图像，它是两列的宽度，并且该图像平铺在围绕两列的容器元素中。然后背景将延伸到最高的柱子。从理论上讲，同样的技术可以用于两列、三列或更多列。
原始文章位于 A List Apart (http://www.alistapart.com/articles/fauxcolumns/) 上，但最终结果可能会因您的设置和结构而有很大差异。
【讨论】：
-
如何让布局变得流畅？这意味着如果我的宽度也不同？
-
@booota - 您可以通过使用多个包含元素在流体宽度布局中使用它。例如，外部容器将具有主列的背景，而内部容器将具有右列的背景，但是这两个容器仍将包裹两列。不同之处在于右列背景将是右列的宽度，并位于包含元素的右侧。
-
@booota - 一旦你开始在两三列之外添加流动性，人造列布局就会变得更加复杂。当然，并非不可能使用，但在这一点上，我建议重新考虑您的设计和/或通过在线搜索找到其他技术。
根据其他布局因素，一个简单的解决方案是创建一个跨越两者的单一背景图像，并将其设置为容器元素的背景。这样，无论哪一列的内容垂直较大，背景都会覆盖整个列。
当然，这确实最适合固定宽度布局等。
【讨论】：