javascript - 使用 CSS 允许框水平拉伸(stretch)到给定的空间

Question

我一直在思考如何在 CSS 中执行此操作。请引用下面的 2 张图片。想象一个 2 列布局，其中左列的高度可能比右列长，也可能不长，反之亦然。现在在图片中，这些是绿色和红色。我有一个评论框和许多框(复数)，它们可能是需要水平拉伸(stretch)到给定空间的 div。因此，当右列较长时，框从左下方开始变小。但是当左列较长时，框(仍然)从左侧开始，但显然占据了整个尺寸。

我想知道如何在 CSS 中为灰色框实现这一点。我知道 javascript 可以做到，但 css 示例会有所帮助。

FelipeAI 和 Daneild 的代码都是正确的。我选择了 FelipeAI 的，因为他的代码少了一个规则，但实现了同样的事情。

Answer 1

这个怎么样:

FIDDLE

标记

<div class="wpr">
    <div class="left"></div>
    <div class="right high"></div>
    <div class="comment"></div>
    <div class="comment"></div>
    <div class="left high"></div>
    <div class="right"></div>
    <div class="comment"></div>
    <div class="comment"></div>
</div>

CSS

.wpr
{
   width: 250px; 
}
.left,
.right {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    display: inline-block;
}
.left {
    background: green;
    float:left;
}
.right {
    float: right;
    margin-left: 50px;
    background: brown;
}
.high {
    height: 150px;
}
.comment {
    clear: left;
    overflow: hidden;
    background: gray;
    height: 60px;
    margin-bottom: 10px;
}

(css 修改改编自@FelipAls 更改为我原来的 fiddle )