Question

如何阻止最后一个div（类）进入？我将margin-right放在.artist_wrap上。我想当我放overflow: hidden它会留在#music_videos_wrap里面但它消失了。感谢任何能帮助我的人。

HTML：

<div id="music_videos_wrap">
    <div class="artist_wrap"></div>
    <div class="artist_wrap"></div>
    <div class="artist_wrap"></div>
    <div class="artist_wrap"></div>
</div>

CSS：

#music_videos_wrap{
    float:left;
    margin:0 0 0 23px;
    width:944px;
    height: 257px;
    background-color: red;
    /*overflow:hidden;*/
}
.artist_wrap{
    float:left;
    width:190px;
    height:257px;
    background-color: green;
    margin:0 62px 0 0;
}

Answer 1

首先，您的测量结果有些不对，您需要将包装器宽度为946px以适合您想要的元素，或者更改.artist_wrap的宽度。修复之后，你可以设置margin-left：62px到.artist-wrapp而不是右边距。这样你就可以在first-child上使用margin-left：0（这是比上一个孩子更多的跨浏览器）：

.artist_wrap:first-child { margin-left:0; }

参见jsfiddle：http://jsfiddle.net/Rkp3Z/

Answer 2

你的.artist_wrap宽度太大了

你应该使用萤火虫并调整它，看看能够适合父母宽度的最大值

here you go with 150px as width

或从父项宽度计算它减去边距，边框和填充

944px parents width / 4 divs = 236 width per artist child

如果你为每个.artist_wrap设置了右边距，你需要从宽度中减去这个边距，使其适合父母的944像素宽度

这意味着236-62 = 174px作为artist_wrap的宽度

you can also apply margin:0 31px for artist_wrap to have a symmetric layout

div class last div在html css下

2 个答案: