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）的宽度需要包含包含对象的边距。另外，你错过了你的nav div：css中的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/）

砌体/马赛克风格图像网格 - 大小，间距麻烦

1 个答案: