html - CSS float div 垂直填充

Question

我想 float 2 列，但其中一列比另一列短。如何使它们等长？

这是一个 HTML 示例:

<div class="wrapper">
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
    <div class="left">
        Foo Bar
    </div>
</div>

这是 CSS:

.wrapper {
    border:1px solid #aaa;
    overflow: hidden;
}

.left {
    width:80px;
    background-color:#eee;
}

.left, .right {
    padding:5px;
    float: right;
}

这是 JSFiddle .

Answer 1

试试这个:

.left {
    float:left;
    width:50%;
    background-color:#eee;
}

.right {
    float: right;
    width:50%;
    background-color:lime;
}

LINK