CSS棘手的列布局

Question

我有两列布局，第一列中每行总有一个项目，第二列中有任意数量的项目。我的示例中的问题是，如果第一列项高于第二列中的列，则大小不同并且float仅起作用。 我知道最好将右列的项目包装到一个容器中，但是我不能改变HTML的结构，我只能做一些CSS和/或JavaScript（包括JQuery）。但我更喜欢只有CSS的解决方案。 我也无法静态设置第一列项的高度，因为右列项的数量和高度是动态的。

预期结果：

请参阅JSFiddle以了解我当前的方法： https://fiddle.jshell.net/uqh9uz5o/

谢谢， INGO

Answer 1

您可以尝试使用自己的浮动将“其他”项目包装在另一个div中。

<div class="item">
    <div class="label">2 label</div>
    <div class="wrapother">
        <div class="other">2_hallo1</div>
        <div class="other">2_hallo2</div>
        <div class="other">2_hallo3</div>
    </div>
</div>

.wrapother {
    float:left; 
    width: 80%;
}