2016-06-26 14 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> 

今、彼らはパディング

答えて

1

ことなく、すべての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

いくつかのオプションがあります。 1つは、たとえば5列のテーブルを作成し、各テーブルセル内に、各セルに必要なすべてのピクチャを展開することです(もちろんマージンを考慮します)。

0

あなたもfloatオプションを試すことができ、その後、以下のように適切に整列するmarginを使用して、

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

をしかし、ブートストラップは –

+0

はい、それはある応答.Sであるが、それは間隔の間に、あなたは余裕を試すことができます調整します上から、(すなわち)画像のボトムまたは上または左または右マージン。 – frnt

関連する問題