如何在同一条线上设计2个div，宽度固定在左边，右边响应，两个相同的高度

Question

我想在左边创建一个时间轴的页面，在右边创建一个文本。 两个div必须具有相同的高度（因为每个文本都是根据左边的特定日期）。

难点在于我希望左边的div有一个固定的宽度（我不需要时间轴来响应）而右边的那个（文本）要有响应。

我在想width: auto; display: inline-block;响应div可以完成这项任务，但是如果文本太长，div会转到一个新行并占用100％的容器。

所以，这听起来很基本，但我没有看到任何方法来实现它而不使用javascript。

你会怎么做（左边是固定的，右边有反应，两边都是相同的高度）？

http://jsfiddle.net/N6VPn/

Answer 1

您可以使用Flex模型实现这一目标......

Demo

.wrap {
    display: flex;
}

.left {
    width: 50px;
    background-color: grey;
}

.right {
    flex: 1;
    background-color: red;
    vertical-align: top;
}

---

对flex不满意？使用display: table;作为父元素，并将子元素设置为display: table-cell;

.wrap {
    display: table;
}

.left {
    width: 50px;
    background-color: grey;
    display: table-cell;
}
.right {
    display: table-cell;
    background-color: red;
    vertical-align: top;
}

Demo