セクション要素をインラインで表示できません

Question

CSSアニメーションを内部に保持する3つのセクション要素があります。私はディスプレイを使ってそれらを並べて置くことを試みます：インラインまたはフロートして、それらは積み重なります。

HTML

<section class="spinner-1"> 
<div class="spinner"></div> 
</section> 

<section class="spinner-2"> 
<div class="spinner"></div> 
</section> 

<section class="spinner-4"> 
<div class="spinner"></div> 
</section> 

CSS

.spinner { 
    position: absolute; 
} 

.spinner-1, .spinner-2, .spinner-4 { 
    height: 100px; 
    width: 200px; 
} 

あなたはcodepenでCSSコードとプレビューの残りの部分を見ることができます。

Answer 1

.spinner自体をposition: absoluteに設定しているからです。

display: inline-blockを使用する必要があるのは、自分の幅と高さを維持するためです。 display: inline要素は幅と高さを直接制御できないため、要素は何も行いません。

Answer 2

section { 
    float: left; 
} 

あなたのコードの中にありますか？

Answer 3

セクション{表示：インラインブロック;}

彼らは、この方法をスタックしないであろう。