是否有可能使用CSS有条件地右对齐元素？

Question

我试图仅在有空间的情况下先使B对齐，然后再使C右对齐，如果没有足够的空间，我如何仅将自身定位在B之后而不是右对齐？这仅适用于javascript还是可以从CSS做到？

<div class='A'>
    <div class='B'/>
    <div class='C'/>
<div>

实际上，我使用javascript来应用css类并基于这些类进行更新，但是我想知道如果不这样做，是否有可能。

Answer 1

您可以使用flexbox。通过使用justify-content:space-between;个项目，它们之间会占用空间

.A{
    display:flex;
    justify-content:space-between;
}

<div class="A">
    <div class="B">B</div>
    <div class="C">C</div>
</div>

Answer 2

尝试display: flex

像这样：

<div class=‚flex a‘>
  <div class=‚b‘></div>
  <div class=‚spacer‘></div>
  <div class=‚c‘></div>
</div>

并使用此CSS

.flex {
  display: flex;
  flex-wrap: wrap;
}

.spacer {
  flex: 1 1 auto
}

有关详情，请参见here

Answer 3

是的，您可以使用

 flex-wrap: wrap;

以您的样式删除显示弯曲