* {
margin: 0 auto;
}
.photos {
padding: 5%;
background-color: #27ae60;
box-sizing: content-box;
}
.photos > .photos-wrapper {
width: 100%;
text-align: center;
align-content: center;
overflow: hidden;
}
.photos > .photos-wrapper > .photo-1 {
width: 50%;
float: left;
display: inline-block;
margin: 0;
}
.photos > .photos-wrapper > .photo-1 > img {
width: 100%;
margin: 0%;
}
.photos > .photos-wrapper > a > button {
border: none;
background-color: black;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 5px;
border-radius: 5px;
color: white;
margin: 2% 2%;
cursor: auto;
padding: 2% 6%;
}
<div class="photos">
<div class="photos-wrapper wrapper">
<div class="photo-1">
<img src="https://s-media-cache-ak0.pinimg.com/originals/2c/57/83/2c57831c6f450a30dc21bd4353b3107a.jpg" alt="Mountain Photography">
</div>
<div class="photo-1">
<img src="https://i.vimeocdn.com/video/376212686_1280.jpg">
</div>
<div class="photo-1">
<img src="http://www.airpixa.co.uk/images/architectural-photography-london-skyline.jpg?crc=4158542412" alt="Mountain Photography">
</div>
<div class="photo-1">
<img src="http://www.larissajoice.co.uk/wp-content/uploads/2016/11/M-Shed-Wedding-Photography-Bristol_0212.jpg" alt="Mountain Photography">
</div>
<div class="photo-1">
<img src="https://i.ytimg.com/vi/XdYEzui3Ttc/maxresdefault.jpg" alt="Mountain Photography">
</div>
<div class="photo-1">
<img src="https://nhd.usgs.gov/photos/08_Hells_Canyon.jpg" alt="Mountain Photography">
</div>
</div>
</div>
http://codepen.io/anon/pen/BWQJgO
如此处所示,我正在尝试制作图像网格,但是我想摆脱的图像行之间存在差距。任何帮助,将不胜感激! :)