Question

我目前陷入了一个设计问题，这让我头疼了太久。

我有一个双列布局，其中一列用于内容（左侧），侧栏用于列出一些体育场馆（右侧），此列的内容超出了内容列的内容。

基本上我希望实现的目标是使内容列与左侧列匹配。

就像我在Codepen上快速做过的那样http://codepen.io/anon/pen/iLJAe 关于如何做到这一点的任何建议将不胜感激。

提前感谢你

Stu：）

这里是我的style.css中的两列。

的style.css

.content {
    border: 1px solid #e8e8e8;
    float: left;
    margin: 5em 0 0;
    padding: 1em;
    height: 100%;
}

.sidebar {
    border: 1px solid #e8e8e8;
    float: left;
    margin: 5em -0.1em 0;
    padding: 1em;
    height: 100%;
}

Answer 1

您可以使用css display: table;属性。

首先将两个div放在一个包装器中（充当两者的父div）

像：

<div id="#wrapper">
    <div class="content"></div>
    <div class="sidebar"></div>
</div>

然后在你的css中，使用display: table到包装div和display:table-cell;到列div（这将使两个div在表中的行为类似<td>）来使它们到达相同的高度。

像：

.wrapper{
    height: 100%;
    width: 100%;
    display: table;
    float:left;
}

.content {
    border: 1px solid #e8e8e8;
    margin: 5em 0 0;
    padding: 1em;
    height: 100%;
    background: red; /* for test */
    display: table-cell;
}

.sidebar {
    border: 1px solid #e8e8e8;
    margin: 5em -0.1em 0;
    padding: 1em;
    height: 100%;
    background: blue; /* for test */
    display: table-cell;
}

<强> WORKING SAMPLE

如何在两列布局中匹配两列的高度？

1 个答案: