css - 如何将两个元素放在一起？

Question

HTML：

<div class="epBtn">
    <span class="thumbnail">
        <img src="episodes/1.jpg" />
    </span>
    <span class="play">Episode 1</span>
</div>

在 CSS 方面，我能做些什么来制作.thumbnail并.play出现在彼此旁边而不使用float?

Answer 1

使用inline-block：

<div class="epBtn">
    <span class="thumbnail">
        <img src="episodes/1.jpg" />
    </span>
    <span class="play">Episode 1</span>
</div>

CSS：

.thumbnail, .play { display: inline-block; vertical-align: middle; }

Answer 2

我已经在下面的地址模拟了我相信您正在尝试完成的事情。这是通过将缩略图的区域（在本例中为左侧）设置为容器中的边距空间，然后将拇指绝对定位到该容器内的中心来完成的。由于容器的高度通常是已知的（通过拇指），因此您可以使用topcss 属性将相关内容垂直居中。由于容器也是相对位置，因此绝对定位的内容将是绝对的。

JSFiddle

.epBtn {
    /* These are cosmetic except for height, which you should know. */
    max-width: 170px;
    margin: 10px;
    height: 60px;
    background-color: #eee;
    border: 1px solid #ccc;
    position: relative;
    font-family: arial;
}
.play {
    top: 20px;
    margin-left: 65px;
    position:relative;
}
.thumbnail {
    position: absolute;
    top: 5px;
    left: 5px;
}

Please let me know if this what you had in mind.