html - Div 元素不会彼此相邻对齐

Question

这是我想要得到的:

这是我所拥有的:

这是我使用的 CSS 代码:

#pagewrap {
    padding: 5px;
    width: 100%;
    margin: 20px auto;
}
#board{
    //middle box
    background:#CCC;
    border:#999 1px solid;
    width: 560px;
    float: left;
    padding: 5px 15px;
    margin: 0px 5px;
    padding-left: 20%;
    padding-right: 20%; 
}

#menu {
    //Left box
    width: 15%;
    background-color: grey;
    float: left;
    padding: 5px 15px;

}
#leaderboard {
    //right box
    width: 15%;
    float: right;
    background-color: grey;
    padding: 5px 15px;
}

EDIT1:添加了 jsfiddle

jsfiddle.net/Xn3u6/

Answer 1

有很多方法可以达到预期的效果，使用 display:table 和 display:table-cell 是最简单的方法之一。

检查 DEMO 首先。

#pagewrap {
padding: 5px;
width: 100%;
margin: 20px auto;
display:table;
}
#board{
padding: 5px;
background-color:#cccccc;
display:table-cell;
}
#menu {
padding: 5px;
background-color: red;
display:table-cell;
}
#leaderboard {
padding: 5px;
display:table-cell;
background-color: green;
}

使用 flex也可以达到同样的效果，但IE8和IE9的支持并不广泛。

检查 DEMO 使用 Flex 方法。

#pagewrap
{display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
padding: 5px;
background-color:#cccccc;
width:25%;
}
#menu {
padding: 5px;
background-color: red;
width:50%;
}
#leaderboard {
padding: 5px;
background-color: green;
width:25%;
}