html - 像 Bootstrap 一样对齐图像

Question

我想像 bootstrap 一样对齐我的图像，我不能用 bootstrap 来做，因为用户可以选择调整图像大小并使用 Bootstrap 类“col-md、col-xs 等”。用户无法调整图像宽度，我尝试创建一个 width:100% 的 div，然后我将 width: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