html - 如何让 float 的 div 列垂直填充容器

Question

示例:http://jsfiddle.net/3epVw/2/

.floated_left {
    text-align: center;
    float: left;
    width: 50%;
    border: 3px solid red;
}

.floated_right {
    text-align: center;
    float: right;
    width: 50%;
    border: 3px solid red;
}

我希望红色盒装 div 填充包装 div(绿色)中剩余的空间

Left Column 可能比 Right Column 大，反之亦然，我希望在任何情况下都能进行填充。

我还希望右列 1 和右列 2 尽可能均匀地填充(而不是全部来自右列 2

我是 css 布局的新手，我正在努力让它发挥作用。

Answer 1

这是 flexbox 的工作.

您需要一个中间包装器，用于左右列。

.wrapper {
    display: flex;           //this makes it a flexbox
    margin: 5px;
    border: 3px solid green;
}
.flex_wrap {
    display: flex;
    flex: 1;                //this makes each child element take up the same amount of space.
    flex-direction: column; //this makes the child elements stack vertically
    border: 2px solid blue;
}
.flex_column {
    display: flex;
    flex: 1;
    justify-content: center; //centers horizontally
    align-items: center;     //centers vertically
    border: 3px solid red;
}

http://jsfiddle.net/3epVw/5/

Flexbox 被当前的浏览器广泛支持，但是 there be dragons如果您需要支持 IE9 或以下版本。

编辑以添加 align-items: center; 以使文本垂直居中。