响应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>