有一个元素总是粘在上面的底部

Question

解释起来有点棘手，所以我把a fiddle放在一起。

在保持左右框垂直对齐的同时（左图和右框在图片中是正确的），我需要确保右下方框粘在底部或右框。

更简单地说：中间的例子是错的。 红色和绿色框很好，但我希望蓝色框总是贴在绿色框的底部。

考虑：

• 左右下方元素可以是任意高度。
• 正确的元素具有固定高度（在这种情况下为30px）。
• 我不能使用任何javascript，但我可以更改我的HTML结构。

我尝试在右下方元素上使用position: absolute，但由于左右元素的变化高度，它会产生多个问题。

我想过使用右边和右边元素的包装，但我不知道如何左右对齐。

有什么想法吗？

Answer 1

将float:left;添加到.left。同时将float:right;添加到.right

* {
    padding: 0;
    margin: 0;
}

ul {
    width: 600px;
}

li {
    display: inline-block;
    margin-bottom: 0px;
}

li:nth-child(even) .left {
    height: 80px;
}

li:nth-child(odd) .bottom-right {
    height: 80px;
}

.left {
    width: 250px;
    display: inline-block;
    vertical-align: middle;
    background-color: LightCoral;
    float:left;      /*<- Code added here*/
}

.right {
    width: 346px;
    display: inline-block;
    vertical-align: middle;
    background-color: lightgreen;
    float:right;    /*<- Code added here*/
}

.bottom-right {
    width: 346px;
    background-color: lightblue;
    float:right;
}

<ul class="wrapper">
    <li>
        <span class="left">
            Left  (can be of any height)
        </span>
        <span class="right">
            Right (fixed height)
        </span>
        <span class="bottom-right">
            Bottom-right (can be of any height)
        </span>
    </li>
    <li>
        <span class="left">
            Left  (can be of any height)
        </span>
        <span class="right">
            Right (fixed height)
        </span>
        <span class="bottom-right">
            Bottom-right (can be of any height)
        </span>
    </li>
    <li>
        <span class="left">
            Left  (can be of any height)
        </span>
        <span class="right">
            Right (fixed height)
        </span>
        <span class="bottom-right">
            Bottom-right (can be of any height)
        </span>
    </li>    
</ul>