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

遇到的问题

最近开发一个小型项目，项目只有两个页面，一个主页面，一个列表页面。项目使用的是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>

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