將頂部對齊並在Div之間創建空間

如何將我的三個div對齊到頂部？ - 查看谷歌郵件和谷歌地圖下載內容較少後的效果如何？我希望他們在頂部對齊，不管他們下方有多少文字將頂部對齊並在Div之間創建空間

另外，我有三個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; 
}

來源

2014-07-09 user3075987

將它們對齊在單元格頂部'vertical-align：top;' – Huangism

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

應該這樣做

來源

2014-07-09 18:01:00

謝謝。如何在div之間添加空格？說像5px？ – user3075987

看黃宗教的答案 –

我把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; 
}

您需要的inline-block的元素垂直對齊頂端vertical-align: top; 對於間距，我做你的塊寬30％，這意味着你100％剩下10％。因此，我爲每個塊設置了5％的餘量，然後將第一個塊margin-left設置爲0，以便您擁有完美的100％。由於您的寬度爲％，因此設置邊距爲％也是明智的做法

來源

2014-07-09 18:02:02 Huangism

將頂部對齊並在Div之間創建空間

回答

相關問題