差距之間圖像柵格

* { 
 
    margin: 0 auto; 
 
} 
 

 
.photos { 
 
    \t padding: 5%; 
 
    \t background-color: #27ae60; 
 
    \t box-sizing: content-box; 
 
} 
 

 
.photos > .photos-wrapper { 
 
    \t width: 100%; 
 
    \t text-align: center; 
 
    \t align-content: center; 
 
    \t overflow: hidden; 
 
} 
 

 
.photos > .photos-wrapper > .photo-1 { 
 
    \t width: 50%; 
 
    \t float: left; 
 
    \t display: inline-block; 
 
    \t margin: 0; 
 
} 
 

 
.photos > .photos-wrapper > .photo-1 > img { 
 
    \t width: 100%; 
 
    \t margin: 0%; 
 
} 
 

 
.photos > .photos-wrapper > a > button { 
 
    \t border: none; 
 
    \t background-color: black; 
 
    \t text-transform: uppercase; 
 
    \t font-weight: 800; 
 
    \t letter-spacing: 5px; 
 
    \t border-radius: 5px; 
 
    \t color: white; 
 
    \t margin: 2% 2%; 
 
    \t cursor: auto; 
 
    \t padding: 2% 6%; 
 
}

<div class="photos"> 
 
\t <div class="photos-wrapper wrapper"> 
 
\t \t <div class="photo-1"> 
 
\t \t \t <img src="https://s-media-cache-ak0.pinimg.com/originals/2c/57/83/2c57831c6f450a30dc21bd4353b3107a.jpg" alt="Mountain Photography"> 
 
\t \t </div> 
 

 
\t \t <div class="photo-1"> 
 
\t \t \t <img src="https://i.vimeocdn.com/video/376212686_1280.jpg"> 
 
\t \t </div> 
 
\t \t <div class="photo-1"> 
 
\t \t \t <img src="http://www.airpixa.co.uk/images/architectural-photography-london-skyline.jpg?crc=4158542412" alt="Mountain Photography"> 
 
\t \t </div> 
 

 
\t \t <div class="photo-1"> 
 
\t \t \t <img src="http://www.larissajoice.co.uk/wp-content/uploads/2016/11/M-Shed-Wedding-Photography-Bristol_0212.jpg" alt="Mountain Photography"> 
 
\t \t </div> 
 

 
\t \t <div class="photo-1"> 
 
\t \t \t <img src="https://i.ytimg.com/vi/XdYEzui3Ttc/maxresdefault.jpg" alt="Mountain Photography"> 
 
\t \t </div> 
 

 
\t \t <div class="photo-1"> 
 
\t \t \t <img src="https://nhd.usgs.gov/photos/08_Hells_Canyon.jpg" alt="Mountain Photography"> 
 
\t \t </div> 
 

 
\t </div> 
 
</div>

http://codepen.io/anon/pen/BWQJgO

如這裏看到的，我試圖使圖像的網格，但我」圖像的行之間的差距d喜歡擺脫。任何幫助，將不勝感激！ :)

來源

2017-03-07 aaronfty

嘗試增加這種風格：.photos img { display: block; }

看到這個codepen

來源

2017-03-07 22:12:51 zgood

甜！所有的作品，告訴我具體做什麼？謝謝。 :) – aaronfty

它設置圖像作爲一個塊，你可以看到效果，如果你在這個網站上玩它https://www.w3schools.com/cssref/pr_class_display.asp –

@aaronfty'img'的默認是' display：inline-block'這就是創建這個空白區域的原因（見[這裏]（https://css-tricks.com/fighting-the-space-between-inline-block-elements/）爲什麼和其他可能的解決方案）...它表示嵌入塊元素_「你得到空格的原因是，你在元素之間有空格 - 在HTML標記中 - （一個換行符和一些標籤被視爲一個空格，只是要清楚）「_ – zgood

差距之間圖像柵格

回答

相關問題