Question

我试图连续排列这些图片链接但是遇到了一些困难。如果我添加一些CSS参数，例如float left和float right，它最终将它定位在页面上的奇怪位置。

这就是我得到的：

HTML：

<a href="http://www.page.com/album">
<div class="preview">
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Record-Album-02.jpg" title="Photo Albums" alt="" />
    <div>
        <div>
            <h2>Photo Albums</h2>

            </div>
        </div>
    </div></a>

<a href="http://www.page.com/storybook">
    <div class="preview">
     <img src="http://www.clipartbest.com/cliparts/RiA/6a5/RiA6a5eoT.jpeg" title="Digital Story Books" alt="" />
        <div>
            <div>
                <h2>Digital Story Books</h2>

        </div>
    </div>
</div>
</a>

和CSS：

.preview {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.preview img {
    width: 100%;
    height: 100%;
    padding: 0;
}
.preview > div {
background-color: rgba(0,0,0,0.75);
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.3s linear;
text-shadow: #000 1px 1px 0;
color: #ccc;
text-align: center;
}
.preview:hover > div {
    display: block;
    opacity: 1.0;
}
.preview > div div {
    padding: 20px 40px;
}
.preview h2 {
    font-size: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.preview p {
    margin-bottom: 10px;
}

如何将它们排成一行，以便中间有半英寸的空间？

以下是我的预览： http://jsfiddle.net/FZ2rZ/

Answer 1

这应该这样做：

.preview {
    display: inline-block;
    margin: 0 40px 0 0;
}

包含图像的div的内联块将根据您的需要显示连续的图像。边距适用于图像右侧40px。

默认情况下，图像是块元素，这意味着它们将占据页面的整个宽度。内联元素（如或标记）不会折叠，并且将位于同一行。 Learn more about display CSS property.

*编辑以修正边距而不是填充。

Answer 2

如果可以，请避免漂浮。浮动适用于有限的情况。通常使用display:inline-block;是合适的。也就是说，当你这样做时，标签之间的任何空间也会被显示出来（你正在制作＃34;内联＆＃34;空格也是内联的。）

你可以把你所拥有的东西添加到这个CSS：

a {
    display:inline-block;
}
a:not(:first-child) {
    margin-left:.5in;
}

然后，删除此处的空格

</a>

<a href="http://www.page.com/storybook">

获取

</a><a href="http://www.page.com/storybook">

Here's your modified fiddle.

如何使用CSS在水平行中排列图像？

2 个答案: