如何用 CSS 将图像水平排列？

Question

我试图将这些图像链接排成一行，但遇到一些困难。如果我添加一些 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;
}

<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>

我怎样才能将它们排列起来，使它们之间有半英寸的空间？

这是我所拥有的预览： http ://jsfiddle.net/FZ2rZ/

Answer 1

这应该可以做到：

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

包含图像的 div 的内联块将根据您的需要按行显示图像。图像右侧的边距为 40 像素。

默认情况下，图像是块元素，这意味着它们将占据页面的整个宽度。内联元素（如 or 标签）不会折叠并且位于同一行。了解有关显示 CSS 属性的更多信息。

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