0

我的主页有一个砖石/马赛克风格的图像网格，这给我带来了一些麻烦：间距。理想情况下，所有图像之间应该有 10px 的间隙（尽管它们应该与边缘齐平div）。在大多数情况下，我相信我的设置是正确的，但是中间的空间是关闭的，并且底部的图像行向右移动得很好。我缺少什么来修复这个？

jsfiddle

为代码添加了语法高亮

<nav>
        <div>
            <a href="#"><img src="http://placehold.it/465x149"></a>
            <a href="#"><img src="http://placehold.it/465x149"></a>
        </div>
        <div>
            <a href="#"><img src="http://placehold.it/165x309"></a>
            <a href="#"><img src="http://placehold.it/288x309"></a>
            <a href="#"><img src="http://placehold.it/465x309"></a>
            <a href="#"><img src="http://placehold.it/465x309"></a>
        </div>
    </nav><!-- end nav -->

nav {
    width: 940px;
}
nav a {
    float: left;
    background-color: gray;
}
nav div:nth-child(1) {
    float: left;
    width: 465px;
}
nav div:nth-child(1) a:nth-child(1) {
    width: 465px;
    height: 149px;
    margin: 0 5px 10px 0;
}
nav div:nth-child(1) a:nth-child(2) {
    width: 465px;
    height: 149px;
    margin: 0 5px 5px 0;
}
nav div:nth-child(2) a:nth-child(1) {
    width: 165px;
    height: 309px;
    margin: 0 5px 0 5px;
}
nav div:nth-child(2) a:nth-child(2) {
    width: 288px;
    height: 309px;
}
nav div:nth-child(2) a:nth-child(3) {
    width: 465px;
    height: 309px;
    margin: 5px 5px 0 0;
}
nav div:nth-child(2) a:nth-child(4) {
    width: 465px;
    height: 309px;
    margin: 5px 5px 0 0;
}
4

1 回答 1

4

我不确定你在这里做什么（这是一个导航？），我不认为我会以这种方式构建代码。但是，您需要记住，列（div）的宽度需要包括包含对象的边距。此外，您在 css 中缺少 nav div:nth-child(2) 列定义。这有效，但我不喜欢它：

nav {
    width: 945px;
}
nav a {
    float: left;
    background-color: gray;
}
nav div:nth-child(1) {
    float: left;
    width: 470px;
    margin-right: 5px;
}
nav div:nth-child(1) a:nth-child(1) {
    width: 465px;
    height: 149px;
    margin: 0 0 10px 0;
}
nav div:nth-child(1) a:nth-child(2) {
    width: 465px;
    height: 149px;
    margin: 0 5px 5px 0;
}
nav div:nth-child(2) {
    width: 470px;
    float:left;
}
nav div:nth-child(2) a:nth-child(1) {
    width: 165px;
    height: 309px;
    margin: 0 10px 0 0;
}
nav div:nth-child(2) a:nth-child(2) {
    width: 288px;
    height: 309px;
}
nav div:nth-child(2) a:nth-child(3) {
    width: 465px;
    height: 309px;
    margin: 10px 0 0 0;
}
nav div:nth-child(2) a:nth-child(4) {
    width: 465px;
    height: 309px;
    margin: 10px 0 0 0;
}

( http://jsfiddle.net/HytkQ/ )

我更愿意看到这些方面的东西

<div class="container">
        <div class="col">
            <a href="#" class="wide short"><img src="http://placehold.it/465x149"></a>
            <a href="#" class="wide short"><img src="http://placehold.it/465x149"></a>
        </div>
        <div class="col">
            <a href="#" class="narrow tall"><img src="http://placehold.it/165x309"></a>
            <a href="#" class="med tall"><img src="http://placehold.it/288x309"></a>
            <a href="#" class="wide tall"><img src="http://placehold.it/465x309"></a>
            <a href="#" class="wide tall"><img src="http://placehold.it/465x309"></a>
        </div>
</div>

.container {
    width: 960px;
}
a {
    float: left;
}
.col {
    float: left;
    width: 475px;
    margin-right: 5px;
}
.col .wide {
    width: 465px;
    margin: 0 0 10px 0;
}
.col .narrow {
    width: 165px;
    height: 309px;
    margin: 0 10px 10px 0;
}
.col .med {
    width: 288px;
    height: 309px;
    margin: 0 0 10px 0;

}

.col .short {
    height: 149px;
}
.col .tall {
    height: 309px;
}

( http://jsfiddle.net/gkQbC/ ) 我不认为高度实际上是必要的，但我把它们扔了进去。

让大图像出现在下面（下面我评论的选项 1）

<div class="container">
    <div class="col">
        <a href="#" class="wide short"><img src="http://placehold.it/465x149"></a>
        <a href="#" class="wide short"><img src="http://placehold.it/465x149"></a>
        <a href="#" class="wide tall"><img src="http://placehold.it/465x309"></a>
    </div>
    <div class="col">
        <a href="#" class="narrow tall"><img src="http://placehold.it/165x309"></a>
        <a href="#" class="med tall"><img src="http://placehold.it/288x309"></a>
        <a href="#" class="wide tall"><img src="http://placehold.it/465x309"></a>
    </div>
</div>

( http://jsfiddle.net/VCfXD/ )

于 2013-07-19T01:20:59.910 回答