css - 根据左 div 的高度使右 div 重复背景

Question

我在容器 div 中有两个 div，一个向左浮动，一个向右浮动。 我有一个搜索引擎的 php 函数，可以将结果输出到左侧的 div 中。我需要做的是 右侧 div 根据左侧 div 上不同结果的高度重复背景。我不知道该怎么做，有什么想法吗？

现在看起来像这样:

左边div内容右边div背景
左边div内容 右边div背景
左边div内容 右边div背景
左侧div内容
左侧div内容

我需要它做的是根据左侧 div 中的内容重复 y，所以它看起来像这样

左边div内容右边div背景
左边div内容 右边div背景
左边div内容 右边div背景
左边div内容 右边div背景
左边div内容 右边div背景
左边div内容右边div背景

编辑: 我现在能想到的唯一解决方案是在右侧 div 中为左侧 div 中的每个链接吐出一个空行，我想避免这种情况，这就是为什么我要求不同的解决方案。

编辑 2: 通过javascript想到另一种方式，在div加载到页面后检测高度，并将左侧的高度重新分配给右侧。我想避免的事情，但嘿，你能做什么。

Answer 1

作为纯 css 解决方案，您可以使用 faux columns .基本上它意味着在父级上使用背景重复来掩盖 div 高度。这是一个丑陋的 hack，但在大多数情况下效果出奇地好。

或者你可以使用 javascript:

var box1 = document.getElementById('left-div');
var box2 = document.getElementById('right-div');
var height = box1.offsetHeight;
if(box1.offsetHeight < box2.offsetHeight) height = box2.offsetHeight;
box1.style.height = box2.style.height = String(height) + 'px';