響應div與圖像沒有任何保證金在左側和右側

Question

我正在添加div與服務器端腳本顯示專輯封面的圖像。這裏的HTML：

<div id="releases"> 
    <div class="album"> 
     <div class="cover"><img src="cover.jpg" /><br />Artist</div> 
    </div> 
    <div class="album"> 
     <div class="cover"><img src="cover.jpg" /><br />Artist</div> 
    </div> 
    <div class="album"> 
     <div class="cover"><img src="cover.jpg" /><br />Artist</div> 
    </div> 
</div> 

，這裏是我的CSS迄今：

#releases { 
margin: 20px 0; 
width: 100%; 
} 

#releases div.album { 
float: left; 
margin-right: 15px; 
width: 100%; 
max-width: 118px; 
} 

#releases div.album .cover {  
padding: 2px; 
background: #fff; 
box-shadow: 1px 1px 2px #a9aaa8; 
} 

#releases div.album .cover img { 
width: 100%; 
vertical-align: middle; 
} 

我現在加入餘量適合所有專輯在它們之間添加一些空間，但不幸的是留下餘量也經過最後div（在第一個或最後一個之前，我不需要任何保證金）。是否有可能使所有這些響應，所以封面的藝術作品和封面div相應地調整到「發佈」格。

Answer 1

要刪除第一個和最後一個div的邊距：您可以使用:first-child{ margin: 0 }和:last-child{ margin: 0 }，並且可以使您的網站響應媒體查詢。

我使用的媒體查詢使其可以全屏調整窗口大小，當窗口向下移動到600像素寬時，可以看到#releases div變灰，但是您可以將任何樣式放在任何位置通過更改值可以調整屏幕大小。

#releases { 
 
margin: 20px 0; 
 
width: 100%; 
 
} 
 

 
#releases div.album { 
 
float: left; 
 
margin-right: 15px; 
 
width: 100%; 
 
max-width: 118px; 
 
} 
 

 
#releases div.album .cover {  
 
padding: 2px; 
 
background: #fff; 
 
box-shadow: 1px 1px 2px #a9aaa8; 
 
} 
 

 
#releases div.album .cover img { 
 
width: 100%; 
 
vertical-align: middle; 
 
} 
 

 
div:first-child { 
 
margin:0; 
 
} 
 

 
div:last-child { 
 
margin:0; 
 
} 
 

 
@media(max-width:600px){ 
 
    #releases { 
 
    background:#ddd; 
 
    height:300px; 
 
    } 
 
}

<div id="releases"> 
 
    <div class="album"> 
 
     <div class="cover"><img src="cover.jpg" /><br />Artist</div> 
 
    </div> 
 
    <div class="album"> 
 
     <div class="cover"><img src="cover.jpg" /><br />Artist</div> 
 
    </div> 
 
    <div class="album"> 
 
     <div class="cover"><img src="cover.jpg" /><br />Artist</div> 
 
    </div> 
 
</div>