我有一系列縮略圖容器元素與css屬性display:inline-block,但是當它們排成一行時,第二個元素有頂部比第一個空間更多(見附圖)。任何想法爲什麼發生這種情況有沒有更好的方法將這些元素排列在一起?我知道漂浮他們解決了這個問題,但它似乎漂浮不是最好的方式去做這件事。css - 在顯示元素上添加垂直空間:內嵌塊
這裏是我的代碼:
HTML:
<article class="thumb_container">
<div class="thumb_content">
<img src="images/perlin.jpg" alt="Perlin Lines" class="thumb_img"/>
<header class="thumb_header">Perlin Lines</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. Etiam ut.
<a href="#">More...</a>
</p>
</div>
</article>
<article class="thumb_container">
<div class="thumb_content">
<img src="images/branching.gif" alt="Branching" class="thumb_img"/>
<header class="thumb_header">Branching</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi.
<a href="#">More...</a>
</p>
</div>
</article>
CSS:
.thumb_container { display: inline-block; margin-left: 20px; width:220px; background: #fff; -moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); -webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); }
.thumb_container:first-child { margin-left: 0px; }
謝謝。我花了太多時間在實際代碼中尋找空格。 – 2014-01-27 16:56:21