两列等高布局在项目中的应用

遇到的问题

最近开发一个小型项目，项目只有两个页面，一个主页面，一个列表页面。项目使用的是vue技术栈，在开发页面的组件是遇到了一个布局问题，布局如下：

要求：
1.外部容器的高度由图片决定
2.图片的宽度固定，右侧元素分配剩余空间
3.右侧元素的高度于图片的一样高
4.右侧上方文字不固定，但是最多不超过两行，下方文字总是位居底部

分析问题

由上面的要求可以得出以下结论：
1.这是一个两列等高布局
2.右侧是一个垂直方向的两端对齐布局
3.需要多行文本溢出

我们看一下这些问题的常见解决方案：

常见的两列等高布局解决方法
1.flex布局

<div class="demo1 demo">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.demo {
    background-color: aliceblue;
}

.demo .left {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}

.demo .right {
    background-color: chartreuse;
}

.demo1 {
    display: flex;
    align-items: stretch;
}

.demo1 .right {
    flex: 1;
}

.demo1 .left {
    flex-shrink: 0; /*固定宽度*/
}

缺点: IE9及IE9以下版本不支持flex属性
优点：实现方便，还可以方便实现各种比例

2.使用margin和padding正负抵消

<div class="demo2 demo">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.demo {
    background-color: aliceblue;
}

.demo .left {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}

.demo .right {
    background-color: chartreuse;
}

.demo2 {
    overflow: hidden;
}

.demo2 .left,
.demo2 .right {
    float: left;
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

.demo2 .right {
    float: right;
    width: calc(100% - 100px);
}

优点：兼容所有浏览器
3.table布局

<div class="demo3 demo">
    <div class="left">left</div>
    <div class="right">right<br/>right</div>
</div>