砖石/马赛克风格的图像网格 - 尺寸、间距问题

Question

我的主页采用砖石/马赛克风格的图像网格，这给我带来了一些麻烦：间距。 理想情况下，所有图像之间应该有 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;
}

Answer 1

我不确定你在这里的目的是什么（这是一个导航？），我不认为我会以这种方式构建代码。但是，您需要记住，列（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/)