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相应地调整“释放”div。

Answer 1

要删除第一个和最后一个div上的边距：您可以使用:first-child{ margin: 0 }和:last-child{ margin: 0 }，当然，您可以使用媒体查询来响应您的网站。

我使用的媒体查询使得您可以全屏调整窗口的大小，以便在窗口向下移动到600px宽时看到#releases div变灰，但是你可以放任何样式你希望通过更改值来获得您想要的任何屏幕尺寸。

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

响应式div具有左右两侧没有任何边距的图像

1 个答案: