HTML/CSS-右下对齐固定宽度div旁边的动态宽度div

我正在尝试创建一个2列布局，其中右侧div为固定宽度，其内容始终与左侧div的底部和窗口的右侧对齐。左侧div可以根据窗口的内容和剩余宽度在高度/宽度上增加/缩小

使用表格布局，这相当简单：

<table>
    <tr>
        <td class="left">
            <span>Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text</span>
        </td>
        <td class="right">
            <span>Fixed text</span><br/><span>Fixed text</span>
        </td>
    </tr>
</table>

<style>
    table {
        border-collapse: collapse;
    }

    .left {
        background-color: green;
    }

    .right { 
        width: 80px;
        text-align: center; 
        vertical-align: bottom; 
        background-color: red;
    }
</style>

动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本
固定文本
固定文本
桌子{
边界塌陷：塌陷；
}
.左{
背景颜色：绿色；
}
.对{
宽度：80px；
文本对齐：居中；
垂直对齐：底部对齐；
背景色：红色；
}

---

但是，我找不到一种方法来使用基于div的布局来实现这一点。这是可能的，还是在这种情况下，表格布局实际上更可取？

可以使用CSS来完成，但它更复杂，因为您将流体宽度列与固定宽度列混合。看看这篇文章和这个演示

这是一个使用css flexbox很容易实现的设计：

您仍然需要一个容器，这种设计的不同之处在于右侧的div没有上升到顶部。我不知道这是否重要

---

尽量避免使用BOSIBLE表格-除实际表格外，您可以对div使用

display:inline block

，例如：

*{
保证金：0；
填充：0；
}
梅因先生{
边界塌陷：塌陷；
}
.左{
显示：内联块；
宽度：80%；
背景颜色：蓝色；
}
.对{
文本对齐：居中；
垂直对齐：底部对齐；
背景色：红色；
显示：内联块；
宽度：20%；
}

动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本动态文本
固定文本
固定文本

可能重复的问题。。。该问题中的答案没有解决右侧div内容的底部与左侧div内容的底部对齐的要求。这是可行的，但问题是右侧div使用的是一个百分比宽度，如果窗口的宽度增加，则会产生额外的空白。@Wyvern414然后为第二个div指定固定宽度。将宽度：20%更改为宽度：80px后，右边的div不再与屏幕的右边对齐。这非常好用-我不熟悉css flexbox。不幸的是，在我的例子中，我支持IE9，因此目前无法使用此方法。这看起来很有希望，但当右侧div的内容少于左侧时，内容应该与底部对齐，而不是与顶部对齐。我不知道如何做到这一点。

#container {
    display: flex;
}
.left {
    background-color: green;
}
.right {
    flex-shrink:0;
    flex-basis: 80px;
    text-align: center; 
    background-color: red;
    align-self:flex-end;
}