如何将两个span并排放置，然后在它们之上放置一个span

Question

我想知道如何将两个span并排放置，然后在顶部和左侧放置一个span。就像下面，每个价格都是一个跨度。我在CSS方面绝对很糟糕，所以任何帮助都会很感激，谢谢。

$1.15
$2.00 $3.00

我目前有以下HTML，但它有所有并排。

<span id="top-left" class="is-text-align-right">$1.15</span>
<span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
<span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>

Answer 1

#top-left {display: block}
or
span.is-text-align-right:fisrt-child(display:block)

#top-left {display: block;}

<span id="top-left" class="is-text-align-right">$1.15</span>
<span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
<span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>

Answer 2

这是一个使用inf flexbox的小解决方案。我将使用flexbox容器的包装器，然后span成为flex元素，可以根据需要进行特征化。

.wrapper{
display:flex;
width:200px;/*not necessary*/
flex-wrap:wrap;
}
#top-left{
flex: 0 1 100%;
}
#bottom-left,
#bottom-right{
flex: 0 1 50%;
}

<div class="wrapper">
<span id="top-left" class="is-text-align-right">$1.15</span>
<span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
<span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>
</div>

Answer 3

在你的代码中添加以下CSS

#top-left::after{
content: "a";
white-space: pre;
}

<span id="top-left" class="is-text-align-right">$1.15</span>
<span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
<span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>

如果您需要在第2和第3个span之间的空间。你也可以添加这个CSS

#bottom-right {
margin-left: 20px;
}