Question

有可能做这样的事吗？ http://morenheit-vesna.tumblr.com/

假设我有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轴上具有相同的宽度而没有填充

Answer 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>

Answer 2

有几种选择。一个是创建一个表，比如说有5列，并且在每个表格单元格中为每个单元格部署所需的所有图片（当然要处理边距）。

Answer 3

您甚至可以尝试使用float选项，然后使用margin将其正确对齐，如下所示

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

Bootstrap固定宽度图像分为2列

3 个答案: