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

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

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

如果这是您的想法，请告诉我。