对齐图像，如 Bootstrap

Question

我想像 bootstrap 一样对齐我的图像，但我不能使用 bootstrap 来做到这一点，因为用户可以选择调整图像大小并使用 Bootstrap 类“col-md、col-xs 等”。用户无法调整图像宽度，我尝试创建一个宽度为 100% 的 div，然后将宽度：25% 添加到每个图像（我希望每行 4 个图像），并且图像大小正确但不在正确的位置。

这是我目前拥有的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <h2>Without Bootstrap</h2>
    <div class="">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  </div>
</div>

这是我想要的与我拥有的示例

Code

提前致谢。

Answer 1

如果您向包含图像的 div 添加一个类，您可以使用：

display: inline-block;

我在您的文件中添加了 CSS：

.blockRow {
  display: inline-block;
  padding-right: 2.2em;
}

和 HTML：

<div class="container">
  <h2>With Bootstrap</h2>
  <div class="row">
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
    <div class="col-sm-3 col-md-3 col-xs-3">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  </div>
  <hr />
  <h2>Without Bootstrap</h2>
   <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
  <div class="blockRow">
      <img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
    </div>
</div>

您必须使用填充来获得您想要的外观：http://codepen.io/anon/pen/pEobEg