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中留下的剩余空间（绿色）

左栏可能比右栏更大，反之亦然，我希望在任何情况下都能完成填充。

我也希望右列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，但如果您需要支持IE9或更低版本，则there be dragons。

已修改为添加align-items: center;以便垂直居中文字。

如何获取浮动div列以垂直填充容器

1 个答案: