左对齐绝对定位 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、comment/uncomment right:0px; 并调整结果面板的宽度。

有没有办法让rightdiv右对齐而不重叠？浮动目前不是解决方案。

Answer 1

据我所知，您需要以下内容。

使用 display:table-cell 将解决您的问题：

#left, #right {
    display: table-cell;
}

勾选Fiddle Here.

将 width: 100%; 交给 .right 将右对齐 div 右对齐。

检查更新Fiddle Here.

Answer 2

我不完全清楚右 div 在 'collision' 点之后应该如何表现，但 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

Answer 3

为您的 #right 元素使用 flexbox 模型 display: flex。

#outer {
  overflow: hidden;
}  

#left {
  float: left;
  min-width: 66%;
  background-color: #69f;
}

#right {
  min-width: 34%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
}

.item {
  display: inline-block;
}

参见此处示例：http://jsbin.com/qalilu/3/edit。我添加了一个 min-width 约束，这可能会有用。

查看浏览器支持：http://caniuse.com/#search=flexbox 和指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

左对齐绝对定位 div 同时保持流动性

Left aligning absolutely positioned div while maintaining fluidity

html

css

fluid-layout