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

Question

我的主页有一个砖石/马赛克风格的图像网格，这给我带来了一些麻烦:间距。理想情况下，所有图像之间应该有 10 像素的间隙(尽管它们应该与 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/ )