<figure>當div顯示設置爲內聯時，水平排列的元素不會水平排列

我試圖在水平方向排列3個圖像（每個圖標都包含在它自己的div標記中）。當我設置顯示：內聯在CSS中，我得到我想要的結果。<figure>當div顯示設置爲內聯時，水平排列的元素不會水平排列

問題是，當我給每個圖像添加一個數字標籤（這樣我可以在每個圖像下都有一個無花果）。現在，這三幅圖像垂直排列，一個在另一個下面。我怎樣才能解決這個問題？

HTML

<div class="projectGallery"> 
    <div class="projectContainer"> 
     <figure> 
     <img src="http://images.clipartpanda.com/penguin-clip-art-aiq5zAqiM.png" class="projects" class="projects"/><figcaption></figcaption> 
     </figure> 
    </div> 
    <div class="projectContainer"> 
     <figure> 
     <img src="http://img03.deviantart.net/c670/i/2013/086/5/2/golden_gate_bridge_by_ev_sta-d5zg113.jpg" class="projects"/><figcaption></figcaption> 
     </figure> 
    </div> 
    <div class="projectContainer"> 
     <figure> 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/a6/ee/6f/a6ee6f0db923eb8919803b89f37939ee.jpg" class="projects" class="projects"/><figcaption></figcaption> 
     </figure> 
    </div> 
</div>

CSS

div.projectGallery { 
text-align: center; 
padding-top: 60px; 
} 

div.projectContainer { 
display: inline; 
margin: 20px; 
} 

img.projects { 
max-width: 20%; 
height: auto; 
width: auto\9; 
border:1px solid #A1B7CC; 
}

來源

2015-09-15 Christine

使用'inline-block'而不是'inline'。 – Vucko

想了解更多，爲什麼使用'display：inline-block'而不是'display：inline'參考這個[** Answer **]（http://goo.gl/mzn24E） – vivekkupadhyay

，使處於水平位置的DIV我建議使用

display:inline-block

在你的CSS編輯display:inline到display:inline-block

div.projectContainer { 
display: inline-block; 
margin: 20px; 
}

希望得到這個幫助。

來源

2015-09-15 07:41:31 Fiido93

我試過使用內嵌塊，但圖像仍然是垂直對齊的：https：//jsfiddle.net/5jv1kgjr/ – Christine

由於'max-width'百分比，父元素周圍有很多特殊的填充。 http://codepen.io/anon/pen/XmXxRb?editors=110 – Shikkediel

啊，我明白了。感謝您爲我清理！ – Christine

<figure>當div顯示設置爲內聯時，水平排列的元素不會水平排列

回答

相關問題