Question

如何将我的三个div对齐到顶部？ - 了解Google Mail和Google地图如何下载，因为内容较少？我希望它们在顶部对齐，无论它们下面有多少文字

另外，我有三个div，占33.3333％。 - 如果我想在div之间放置更多的空间（比如5px，我该怎么办？

这是我的Jsfiddle：http://jsfiddle.net/huskydawgs/Z7dZR/

这是我的代码：

<div id="wrapper-threecol">
<div id="threecol_row">
<div class="threecol_cell1">
<p class="summary-headline">Google Mail</p>

<p class="summary-description">Gmail's inbox helps you stay organized by sorting your mail by type. Plus, you cannot work correctly.</p>
</div>

<div class="threecol_cell2">
<p class="summary-headline">Google</p>

<p class="summary-description">Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.</p>
</div>

<div class="threecol_cell3">
<p class="summary-headline">Google Maps</p>

<p class="summary-description">Find local businesses, view maps and get driving directions in Google Maps.</p>
</div>
</div>
</div>

这是我的CSS：

#wrapper-threecol {
    position:relative;
    width:100%;
    border: none;
    margin: 20px 0 0 0;
}

    #threecol_row {
    height:100%;
    white-space:nowrap;
    }

    .threecol_cell1, .threecol_cell2, .threecol_cell3 {
    height:100%;
    width:33.3333%;
    display:inline-block;
    white-space:normal;
    }

.summary-headline {
    color: #232323;
    font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 24px;
    margin:0;
    text-align: center;
}

.summary-description {
    color: #232323;
    font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 23px;
    margin: 0;
    text-align: center;
}

Answer 1

我放了5％的间距

http://jsfiddle.net/Z7dZR/1/

.threecol_cell1, .threecol_cell2, .threecol_cell3 {
    height:100%;
    width:30%;
    display:inline-block;
    white-space:normal;
    vertical-align: top;
    margin-left: 5%;
}
.threecol_cell1{
    margin-left: 0;
}

您需要将内联块元素垂直对齐到顶部vertical-align: top; 对于间距，我使你的块宽度为30％，这意味着你有100％的剩余10％。所以我为每个块设置了5％左边距，然后将第一个块margin-left设置为0，这样你就有了100％的完美度。由于宽度为％，因此以％为单位设置边距也是明智的

Answer 2

.threecol_cell1, .threecol_cell2, .threecol_cell3 {
   vertical-align: top;
}

应该这样做。

在顶部对齐Div，并在Div之间创建空间

2 个答案: