html - 左对齐绝对定位的 div，同时保持流动性

Question

我有以下 HTML 结构:

<div id="outer">
    <div id="left">
        <div id="leftContainer"><span>bla</span><span>bla</span><span>bla</span><span>bla</span></div>
    </div>
    <div id="right">
        <div class="item"><span>item text 1</span></div>
        <div class="item"><span>item text 2</span></div>
        <div class="item"><span>item text 3</span></div>
        <div class="item"><span>item text 4</span></div>
        <div class="item"><span>item text 5</span></div>
        <div class="item"><span>item text 6</span></div>
    </div>
</div>

对应的样式:

#left, #right {
    display: inline-block;
}
.item {
    display:inline-block;
    padding: 0px 5px;
}
#right {
    position: absolute;
    /*right:0px;*/ /*this little thing causes my problems*/
    text-align:right;
    border-color: red;
}

我需要 right div 右对齐。为此，我设置了 right:0px;，但随后 right 元素与 left div 重叠。如果 right:0px; 未设置，则 item 元素将换行(这是我要求的一部分)，但 right 元素显然是左对齐的。查看fiddle , 注释/取消注释 right:0px; 并调整结果面板的宽​​度。

是否有一种将 right div 右对齐而不重叠的方法？ float 目前不是解决方案。

Answer 1

我不完全清楚正确的 div 在“碰撞”点之后应该如何表现，但 flexbox 确实允许您想要的对齐方式，而没有重叠，这对您来说似乎是有问题的。

#outer {
  position: relative;
  display: flex;
  justify-content: space-between;
}

#outer {
  position: relative;
  display: flex;
  justify-content: space-between;
}
div {
  border: 1px solid black;
}
#left div span {
  margin: 0px 5px;
  display: inline-block;
}
.item {
  display: inline-block;
  padding: 0px 5px;
}
#right {
  text-align: right;
  border-color: red;
}

<div id="outer">
  <div id="left">
    <div id="leftContainer">
      <span>bla</span>
      <span>bla</span>
      <span>bla</span>
      <span>bla</span>
    </div>
  </div>
  <div id="right">
    <div class="item"><span>item text 1</span>
    </div>
    <div class="item"><span>item text 2</span>
    </div>
    <div class="item"><span>item text 3</span>
    </div>
    <div class="item"><span>item text 4</span>
    </div>
    <div class="item"><span>item text 5</span>
    </div>
    <div class="item"><span>item text 6</span>
    </div>
  </div>
</div>

JSFiddle Demo