在一行中等间距放置3张图像

Question

我在my site上有三张图片，它们的间距并不相等。

我想在页面上均匀地间隔这三个项目。我曾尝试将它们添加到容器中，并对它们应用不同的span类，但没有使用joy。

解决这个问题而又不会在其他地方引发问题的最佳方法是什么？(例如在较小的设备上)。

​

​

<div class="col-1 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
    </a>
        </div>

        <div class="col-5 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
    </a>
        </div>

        <div class="col-8 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
    </a>
</div>

Answer 1

图像的间距不相等，因为您为第二个和第三个div提供了不适当的列类。第二个div使用col-4 (而不是col-5)，第三个div(而不是col-8)使用col-7。

<div class="col-1 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
    </a>
</div>

<div class="col-4 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
    </a>
</div>

<div class="col-7 row-5 sizex-3 sizey-3">
          <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
    </a>
</div>

你可能也想为每个小分辨率的div提供额外的填充。此外，正如haxxxton在评论中提到的，您应该坚持使用标准的bootstarp-3类以获得更好的可用性。

干杯!

Answer 2

您可能会喜欢基于flex的解决方案的反应性行为，如下面的JSFiddle：http://jsfiddle.net/6tknc03s/

.container {
    display:flex;
    justify-content:space-around;
    flex-wrap:nowrap;
}

.container img {
    width:100%;
}

我已经在Chrome上测试过这个解决方案，在FF和iOS中的兼容性要求在我使用的CSS中添加特定于供应商的前缀。

Answer 3

最好的办法是将它们放在col-*-4中(我选择了sm，但是最适合您的就是它)，并确保将class="img-responsive"添加到img元素中，如下所示：

<div class="container">
  <div class="row">

    <div class="col-sm-4">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive">
    </div>

    <div class="col-sm-4">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive">
    </div>

    <div class="col-sm-4">
      <img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive">
    </div>

  </div>
</div>

示例：http://www.bootply.com/4lmpKkgENa