Question

的 HTML： 的

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

在不使用.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

我已经在下面的地址模拟了我认为你想要完成的事情。通过将缩略图的区域（在这种情况下为左侧）设置为容器中的边距空间来完成，然后将拇指绝对定位在该容器内的中心。由于容器的高度通常是已知的（通过拇指），因此您可以使用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;
}

请告诉我你的想法。

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

2 个答案: