如何將兩個元素放在海誓山盟旁邊？

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

我已經模仿什麼，我相信你想在下面的地址來完成。這是通過將縮略圖的區域（在這種情況下爲左邊）設置爲容器中的邊距空間來完成的，然後將拇指絕對定位在該容器內的中心。由於容器的高度通常是已知的（通過拇指），因此可以使用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; 
} 

請讓我知道，如果你腦子裏這算什麼。