Question

我想浮动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

Answer 2

以下是实现此目标的方法之一：

HTML：

<div class="wrapper">
    <div class="cell">...</div>
    <div class="cell">...</div>
</div>

CSS：

.wrapper {
    display:table;
}
.cell {
    display:table-cell;
}

See updated fiddle here.

Answer 3

HTML / CSS中不可用。您可以使用JS计算更高的col高度，并设置为更短的一个或更好的背景图像并设置为父节点。

.wrapper {
    background: url('...'); 
    overflow: hidden; /* due to floating elements */ 
}

Answer 4

您只将宽度应用于.left

更改为：

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

.left {
    background-color:#eee;
}

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

CSS float div垂直填充

4 个答案: