CSS:没有 <table> 且第一列可变高度的 2 列布局

Question

我愿意:

1. 设计 2 列布局:1 个固定宽度(例如 200 像素)，另一个使用所有剩余宽度空间
2. 第一个高度可变且未知，我不希望它超出其父流

在使用 CSS 之前，我会简单地使用 <table>有两个<td>要做到这一点。 使用 CSS，现在，我使用基于 float 左列 + 左填充右列 + 清除两者的方法 <div>之后:

.container2 .columnLeft {
  float: left;
  width: 200px;
}

.container2 .columnRight {
  padding-left: 200px;
}

但我不确定这是正确的方法。 你能告诉我你会怎么做吗？

请使用和修改http://jsfiddle.net/rjjr24sf/4/在您方便的时候。

谢谢，

Answer 1

使用 flexbox :

.container {
    display: flex;
}
.container .columnLeft {
    width: 200px;
}
.container .columnRight {
    flex: 1; /* Grow to rest of width */
}