css - CSS 中的列对齐

Question

我想这是一个简单的问题，但我对此还是有点问题，因为我对 CSS 有点陌生。我希望列与最长的列对齐。

JSFiddle

HTML:

<div class="main">
    <div class="header">
        Header Title
    </div>
    <div class="left_col"></div>
    <div class="main_col"></div>
    <div class="right_col"></div>
</div>

CSS:

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
}

.header {
    padding: 10px;
    background-color: yellow;
    min-width: 200px;
    font-size: 30px;
}

.left_col {
    background-color: cyan;
    width: 15%;
    padding: 10px;
    float: left;
    font-size: 12px;
}

.main_col {
    background-color: salmon;
    width: 70%;
    padding: 10px;
    font-size: 12px;
    float: left;
}

.right_col {
    background-color: greenyellow;
    width: 15%;
    padding: 10px;
    float: right;
    font-size: 12px;
}

.main {
    width: 100%;
    height: 100%;
}

Answer 1

使用 CSS 表格。

使用 display:table 和 width: 100% 在您的列周围添加一个包装器 div

表格将需要 100% 的高度，因此我们在其上设置一个负的上边距以达到标题的高度，然后我们使用 box-sizing:border-box 的顶部填充来解决这个问题。

在列上设置display:table-cell

Demo with little content

Demo with lots of content

标记

<div class="main">
    <div class="header">
        Header Title
    </div>
    <div class="wrapper">
        <div class="left_col">text</div>
        <div class="main_col">text</div>
        <div class="right_col">text.</div>
    </div>
</div>

CSS

html, body
{
    height: 100%;
    margin:0;padding:0;
}
.main {
    width: 100%;
    height: 100%;
    padding-top: 55px; /* height of header */
    margin-top: -55px; /* height of header */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.header {
    padding: 10px;
    background-color: yellow;
    min-width: 200px;
    font-size: 30px;
}
.wrapper
{
    display:table;
    width: 100%;
    height: 100%;   
}
.left_col, .main_col, .right_col
{
    display: table-cell;
}
.left_col {
    background-color: cyan;
    width: 15%;
    padding: 10px;
    font-size: 12px;;
}

.main_col {
    background-color: salmon;
    width: 70%;
    padding: 10px;
    font-size: 12px;
}

.right_col {
    background-color: greenyellow;
    width: 15%;
    padding: 10px;
    font-size: 12px;
}

PS:如果您只想让列占据最高列的高度 - 那么解决方案就更简单了:

LIKE THIS