對齊的div問心無愧之上

Question

不同的高度這是我的HTML標記：

<div class="awards-wrap"> 
    <div class="award"> 
     <img src="http://placehold.it/200x200"> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor</p> 
     <p>Lorem ipsum 2013</p> 
    </div> 
    <div class="award"> 
     <img src="http://placehold.it/200x200"> 
     <p>Lorem ipsum dolor sit amet</p> 
    </div> 
    <div class="award"> 
     <img src="http://placehold.it/200x200"> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor</p> 
     <p>Lorem ipsum 2013</p> 
    </div> 
</div> 

，這是我的CSS：

.awards-wrap { 
    background: gray; 
    margin: 0 auto; 
    text-align: center; 
} 

.award { 
    max-width: 250px; 
    display: inline-block; 
} 

所以他們現在都在中心對齊，也響應，但我希望圖像全部對齊在頂部。

我一直試圖做這種方式：

.awards-wrap { 
    background: gray; 
    margin: 0 auto; 
    text-align: center; 
    display: table; 
} 

.award { 
    max-width: 250px; 
    display: table-cell; 
} 

但它消除了響應，並在中心對齊。我知道我可以使用它的媒體查詢和所有，但我想這樣做，就像它的行爲inline-block。

這裏的jsfiddle它

Answer 1

在這裏你可以找到Flexbox的一個解決方案：

.awards-wrap { 
 
    background:gray; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:center; 
 
    text-align:center; 
 
} 
 
.award { 
 
    max-width:250px; 
 
    margin-right:10px; 
 
}

<div class="awards-wrap"> 
 
    <div class="award"> 
 
    <img src="http://placehold.it/200x200"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor</p> 
 
    <p>Lorem ipsum 2013</p> 
 
    </div> 
 
    <div class="award"> 
 
    <img src="http://placehold.it/200x200"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
    <div class="award"> 
 
    <img src="http://placehold.it/200x200"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor</p> 
 
    <p>Lorem ipsum 2013</p> 
 
    </div> 
 
</div>

說明： 使用此解決方案，所有圖像都位於方框的頂部。但與display:flex;你有額外的設置框之間的空間。使用flex-wrap:wrap;該解決方案也可以響應！

我將CSS清理成最小的解決方案。

Answer 2

您可以使用display: flex對這一問題。只需添加此規則，以你的包裝：

display: flex; 
align-items: flex-start; 

試試下面：

.awards-wrap { 
 
    background: gray; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 

 
.award { 
 
    max-width: 250px; 
 
    display: inline-block; 
 
}

<div class="awards-wrap"> 
 
    <div class="award"> 
 
    <img src="http://placehold.it/200x200"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor</p> 
 
    <p>Lorem ipsum 2013</p> 
 
    </div> 
 
    <div class="award"> 
 
    <img src="http://placehold.it/200x200"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
    <div class="award"> 
 
    <img src="http://placehold.it/200x200"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <p>Lorem ipsum dolor</p> 
 
    <p>Lorem ipsum 2013</p> 
 
    </div> 
 
</div>

Answer 3

爲什麼要使用display: inline-block？ 以下有幫助嗎？

* { 
    box-sizing: border-box; 
} 
.awards-wrap { 
    /* other styles */ 
    height: auto; 
    overflow: hidden; 
} 

.award { 
    /* other styles */ 
    float: left; 
    height: auto; 
    overflow: hidden; 
    margin-right: 5px; 
} 

JSFiddle

Answer 4

可以使用vertical-align屬性這一點，它設置爲top。它會將div對齊到頂部和中心。以下是更新的CSS：

.award { 
max-width: 250px; 
display: inline-block; 
vertical-align:top; 
} 

這裏是一個link在款式更新的jsfiddle

Answer 5

使用

.award 
{ 
vertical-align:top; 
} 

Answer 6

這是我已經修改了代碼和所有圖像現在位置在頂部。

HTML代碼

<div class="awards-wrap"> 
    <div id="award"> 
     <img src="http://placehold.it/200x200"> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor</p> 
     <p>Lorem ipsum 2013</p> 
    </div> 
    <div id="award2"> 
     <img src="http://placehold.it/200x200"> 
     <p>Lorem ipsum dolor sit amet</p> 
    </div> 
    <div id="award3"> 
     <img src="http://placehold.it/200x200"> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor sit amet</p> 
     <p>Lorem ipsum dolor</p> 
     <p>Lorem ipsum 2013</p> 
    </div> 
</div> 

CSS文件

.awards-wrap 
{ 
    background: gray; 
    margin: 0 auto; 
    text-align: center; 
} 

#award 
{ 
    max-width: 250px; 
    display: inline-block; 
    position: relative; 
    bottom: 34px; 
} 

#award2 
{ 
    max-width: 250px; 
    display: inline-block; 
    position: relative; 
    bottom: 102px; 
} 

#award3 
{ 
    max-width: 250px; 
    display: inline-block; 
}