html - 用 2 个 span 覆盖一个 div

Question

我有这个 HTML 片段:

<div style="display: inline-block; width: 20px; height: 20px; background-color: silver">
    <span style="display: inline-block; background-color: red; width: 10px; height: 20px;"></span>
    <span style="display: inline-block; background-color: green; width: 10px; height: 20px; "></span>
</div>

我的目标是覆盖外层<div>有两个并排的跨度，而是一个跨度在另一个跨度之上。

如何做到，让红色的SPAN在左边，右边的SPAN在右边呢？ (注意，我希望解决方案支持 2 个以上的内部 SPAN)。

Answer 1

如果您 float 跨度，它们将并排移动。一个例子 here .

   <div style=" width: 20px; height: 20px; background-color: silver">
        <span style="display: inline-block; float:left;background-color: red; width: 10px; height: 20px;"></span>
        <span style="display: inline-block; float:left;background-color: green; width: 10px; height: 20px; "></span>
    </div>