css - 2 つの要素を隣り合わせに配置するにはどうすればよいですか?

Question

HTML:

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

を使用せずに、CSS に関して、互いに並べ.thumbnailて表示するにはどうすればよいですか?.playfloat

Answer 1

私はあなたが以下のアドレスで達成しようとしていると私が信じていることをモデル化しました。これは、サムネイルの領域（この場合は左側）をコンテナー内のマージンスペースとして設定し、サムをそのコンテナー内の中央に絶対的に配置することによって実現されます。コンテナの高さは一般的に（親指で）わかっているので、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;
}

これがあなたが考えていたものであるかどうか私に知らせてください。

Answer 2

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