无法内联显示节元素

Question

我有三个部分元素可以在里面保存css动画。当我尝试使用显示器将它们并排放置时：内联或浮动它们，它们堆积起来。

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

section {
  float: left;
}

是否在您的代码中。

Answer 2

section {display：inline-block;}

他们不会这样堆叠。

Answer 3

这是因为您将.spinner本身设置为position: absolute。

您需要使用display: inline-block，因为您希望他们保持自己的宽度和高度。 display: inline元素无法直接控制其宽度和高度，因此元素无效。