html - 在页面中间将图像组合在一起

标签 html css

我希望我的图像正确对齐(例如每行 3 张图像)，例如图像之间有 200 像素的空间，并且“墙”和第一张/最后一张图像之间有一个特定的空间。 感谢您的帮助。

它是这样的: current layout

这是我想要的样子: desired look

这是我的代码:

$(document).ready(function() {
  $("a.fancybox").fancybox();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>



<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <li><a href="#" class="navbar-brand"> MMO/MMORPG </a>
    </li>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="./sakums.html">Sākums</a>
        </li>
        <li><a href="#">Galerija</a>
        </li>
        <li><a href="./kontakti.html">Kontakti</a>
        </li>
        <li><a href="./anketa.html">Anketa</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="col-md-3">
  <a class="fancybox" rel="group" href="http://images4.alphacoders.com/209/209608.jpg" title="TERA ONLINE">
    <img src="http://images4.alphacoders.com/209/209608.jpg" width="300" height="200" alt="Tera">
  </a>
</div>

<div class="col-md-3">
  <a class="fancybox" rel="group" href="http://www.1zoom.net/big2/753/262650-blackangel.jpg" title="BLADE&SOUL ONLINE">
    <img src="http://www.1zoom.net/big2/753/262650-blackangel.jpg" width="300" height="200" alt="BnS">
  </a>
</div>

<div class="col-md-3">
  <a class="fancybox" rel="group" href="http://wallfor.net/wp-content/uploads/2015/03/3346_guild_wars_2.jpg" title="GUILD WARS 2">
    <img src="http://wallfor.net/wp-content/uploads/2015/03/3346_guild_wars_2.jpg" width="300" height="200" alt="GW2">
  </a>
</div>

<div class="col-md-3">
  <a class="fancybox" rel="group" href="http://img.finalfantasyxiv.com/lds/pc/global/images/special/fankit/resource/pcw/ffxiv_pcw19002_1920x1080_en.jpg?1432793620" title="FINAL FANTASY XIV">
    <img src="http://img.finalfantasyxiv.com/lds/pc/global/images/special/fankit/resource/pcw/ffxiv_pcw19002_1920x1080_en.jpg?1432793620" width="300" height="200" alt="FFXIV">
  </a>
</div>

<div class="col-md-3">
  <a class="fancybox" rel="group" href="http://www.funmole.com/wp-content/uploads/2013/04/1360803180600.jpg" title="NEVERWINTER">
    <img src="http://www.funmole.com/wp-content/uploads/2013/04/1360803180600.jpg" width="300" height="200" alt="NW">
  </a>
</div>

最佳答案

试试这个:

html

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a class="fancybox" rel="group" href="http://images4.alphacoders.com/209/209608.jpg" title="TERA ONLINE">
        <img class="img-responsive" src="http://images4.alphacoders.com/209/209608.jpg" width="300" height="200" alt="Tera"></a>
    </div>

    <div class="col-md-3">
      <a class="fancybox" rel="group" href="http://www.1zoom.net/big2/753/262650-blackangel.jpg" title="BLADESOUL ONLINE">
        <img class="img-responsive" src="http://images4.alphacoders.com/209/209608.jpg" width="300" height="200" alt="BnS"></a>
    </div>

    <div class="col-md-3">
      <a class="fancybox" rel="group" href="http://wallfor.net/wp-content/uploads/2015/03/3346_guild_wars_2.jpg" title="GUILD WARS 2">
        <img class="img-responsive" src="http://wallfor.net/wp-content/uploads/2015/03/3346_guild_wars_2.jpg" width="300" height="200" alt="GW2"></a>
    </div>

    <div class="col-md-3">
      <a class="fancybox" rel="group" href="http://img.finalfantasyxiv.com/lds/pc/global/images/special/fankit/resource/pcw/ffxiv_pcw19002_1920x1080_en.jpg?1432793620" title="FINAL FANTASY XIV">
        <img class="img-responsive" src="http://img.finalfantasyxiv.com/lds/pc/global/images/special/fankit/resource/pcw/ffxiv_pcw19002_1920x1080_en.jpg?1432793620" width="300" height="200" alt="FFXIV"></a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3">
      <a class="fancybox" rel="group" href="http://images4.alphacoders.com/209/209608.jpg" title="TERA ONLINE">
        <img class="img-responsive" src="http://images4.alphacoders.com/209/209608.jpg" width="300" height="200" alt="Tera"></a>
    </div>

    <div class="col-md-3">
      <a class="fancybox" rel="group" href="http://www.1zoom.net/big2/753/262650-blackangel.jpg" title="BLADESOUL ONLINE">
        <img class="img-responsive" src="http://images4.alphacoders.com/209/209608.jpg" width="300" height="200" alt="BnS"></a>
    </div>


  </div>
</div>

CSS

img {
  padding: 5%;
}

更新 1:更新了 css 以使用 flexbox。

.row {
  margin: 3% 0%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.row:nth-child(2) {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

输出: DEMO

关于html - 在页面中间将图像组合在一起，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34251475/

上一篇：javascript - 在页面加载时显示目录中的图像

下一篇：html - 如何在导航菜单的下拉菜单中获取图像以显示

相关文章：

javascript - 获取正斜杠之间的日期 - JSP

html - 过渡影响背景图像

css - 关闭 twitter bootstrap 工具提示的优雅方式

html - 如何设置内容部分的全高

html - 使用 Text-overflow : ellipsis using bootstrap on same line 将图像放在文本旁边

html - 我怎样才能让我的 block 引​​用看起来像这样？

javascript - 如何用 div 和 Javascript 替换 iframe？

javascript - AngularJS 指令名称以数字开头，无法正常工作。

jquery - anchor 链接到另一个页面

javascript - 如何将具有 contenteditable 列的表保存到本地存储中

©2024 IT工具网  联系我们