0

如何防止最后一个 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;
}
4

2 回答 2

2

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

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

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

于 2012-07-08T15:54:05.447 回答
1

你的 .artist_wrap 宽度太大

你应该使用萤火虫并调整它，看看可以适合父母宽度的最大值是多少

在这里你用 150px 作为宽度

或从父宽度减去边距、边框和填充来计算

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

如果您为每个 .artist_wrap 放置右边距，则需要从宽度中减去此边距以使其适合父级的 944 px 宽度

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

您还可以为 Artist_wrap 应用 margin:0 31px 以具有对称布局

于 2012-07-08T15:51:52.537 回答