2016-06-26 94 views
0

是否可以做這樣的事情? http://morenheit-vesna.tumblr.com/2列自舉固定寬度圖像

說我有5幅圖像寬度相同但高度不同。我怎樣才能做到這一點?

<div id="content"> 
    <img src="http://66.media.tumblr.com/77855c8b4bb6accb5713c746c730e94c/tumblr_o8gwskDNhK1t0yoveo1_500.jpg"> 
    <img src="http://65.media.tumblr.com/1a0b08e263025da71c9312014e7aa791/tumblr_o5xcdidD051tvh80lo1_500.jpg"> 
    <img src="http://65.media.tumblr.com/578a06593a0efc258e62fd5546d096f7/tumblr_o5gdhuOJcx1rx771wo1_500.png"> 
    <img src="http://65.media.tumblr.com/7701c0870eb08dda60cd7490edf472ed/tumblr_mrs5f7cI9z1rnb624o1_500.jpg"> 
    <img src="http://66.media.tumblr.com/bac0f0e6a248059a2cd61d6f43e34689/tumblr_ngspo2vD3V1t0yoveo1_500.jpg"> 
</div> 

現在,他們都在與y軸相同的寬度一列沒有墊襯

回答

1

我認爲,我所做的:d

<div id="content"> 
<div class = "col-md-6 text-center"> 
    <img src="http://66.media.tumblr.com/77855c8b4bb6accb5713c746c730e94c/tumblr_o8gwskDNhK1t0yoveo1_500.jpg"> 
    <img src="http://65.media.tumblr.com/1a0b08e263025da71c9312014e7aa791/tumblr_o5xcdidD051tvh80lo1_500.jpg"> 
    <img src="http://65.media.tumblr.com/578a06593a0efc258e62fd5546d096f7/tumblr_o5gdhuOJcx1rx771wo1_500.png"> 
</div> 
<div class = "col-md-6 text-center"> 
    <img src="http://65.media.tumblr.com/7701c0870eb08dda60cd7490edf472ed/tumblr_mrs5f7cI9z1rnb624o1_500.jpg"> 
    <img src="http://66.media.tumblr.com/bac0f0e6a248059a2cd61d6f43e34689/tumblr_ngspo2vD3V1t0yoveo1_500.jpg"> 
</div> 

0

有幾種選擇。一個是創建一個表格,比如說5列,並且在每個表格單元格中部署每個單元格所需的所有圖片(當然要考慮邊距)。

0

你甚至可以嘗試float選項,然後使用margin到如下正確對準他們,

#content > img{ 
    float:left; 
    margin:10px; 
} 
+0

但引導響應.S –

+0

的確是這樣,但調整是在兩者之間的間隔,你可以嘗試保證金從上面,(即)圖像底部或頂部或左邊或右邊。 – frnt