css - 对齐容器中的内容，并有条件地换行

Question

我正在构建一个项目，为了节省一些空间，我想像这样定位我的内容：

换句话说：

1. 应该始终在Element A文本下方右对齐
2. 只要有足够的空间，就应该“浮动”（前两个例子）
3. 没有空间时换行到下一行（底部示例）。

到目前为止，我已经尝试了两种不同的方法，两种方法都有一些不太正确的地方。这是一个 JSBin。

在第一个选项中，兄弟姐妹，2nd 和 3rd 不太正确：“元素 A”不是“浮动的”（就像有两列一样）。

在第二个选项中，Inline、2nd 和 3rd 是正确的，但第一个不是（“元素 A”粘在左侧）。

任何帮助表示赞赏！

标签： css

Answer 1

将 width: 100% 添加到 p 元素

.container div {
  border: 1px solid #999;
  display: flex;
  justify-content: space-between;
  width: 260px;
  box-sizing: border-box;
  position: relative;
}

.container div p {
  float: left;
  width: 100%;
}

.container .elem {
  border: 1px solid;
  white-space: nowrap;
}

.container div p a {
  float: right;
}

<div class="container">
    <h2>Inline (Parent/Child)</h2>
    <div>
      <p class="text">Short text <a class="elem">Elemente A</a></p>
    </div>
    <div>
      <p class="text">Longer text that wraps two lines but then stops. <a class="elem">Elemente A</a></p>
    </div>
    <div>
      <p class="text">Longer text that wraps two lines, and keeps going till the end, and some more. <a class="elem">Elemente A</a></p>
    </div>
  </div>