我希望我的图像能够正确对齐(例如每行3个图像),而图像之间有200个像素空间,并且“墙”和第一个/最后一个图像之间有一个特定的空间。 谢谢你的帮助。
这是我的代码:
$(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>
答案 0 :(得分:0)
试试这个:
<强> 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