根据左div的高度制作正确的div重复背景

Question

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

现在它看起来像这样：

左div内容右div背景
左div内容右div背景
左div内容右div背景
离开div内容
离开div内容

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

左div内容右div背景
左div内容右div背景
左div内容右div背景
左div内容右div背景
左div内容右div背景
left div content right div background

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

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

Answer 1

作为纯css解决方案，您可以使用faux columns。基本上它意味着在父级上使用背景重复来掩盖div高度。这是一个丑陋的黑客攻击，但对于大多数场景来说效果都非常好。

或者您可以使用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';

Answer 2

将右div高度设置为与left div相同。