css - 在 div 中，我希望 1 个元素左对齐，另一个右对齐

Question

我有两个元素:

<div id="parent">
  <div id="a"></div>
  <div id="b"></div>
</div>

我想让 a 左对齐，b 右对齐。通常我习惯于利用 float ，但我希望它适合父对象的范围以保持清洁。

我试图让 A 和 B 保持干净并水平排列，同时 1 在 div 的 1 大小上。

我正在尝试各种 display:inline-block 尝试，然后进行正确的飞行等，但没有获得预期的效果。

编辑 一般来说，向右和向左浮动似乎是可行的。问题是底部对齐已关闭，这让我很烦。

如果我合并了一个向右浮动和向左浮动，它基于元素工作，但是是否有办法将它排列起来，以便 A 和 B 都位于父元素的底部？

Answer 1

你考虑过 flex 吗？

#parent {
  display:flex;
  justify-content:space-between;
}
div {
  margin:auto 0 0;/* they line up from bottom in this margin case */
  border:solid;
}

<div id="parent">
  <div id="a">a</div>
  <div id="b">b<br/>line</div>
</div>

或

#parent {
  display:flex;
  justify-content:space-between;
}
div {
  border:solid;
  /* no rules about behaviior makes each boxes of a row same height */
}

<div id="parent">
  <div id="a">a</div>
  <div id="b">b<br/>line</div>
</div>

现在问题没有说明盒子的大小(宽度/高度):)