在保持流动性的同时左对齐绝对定位的 div答案

【问题标题】：Left aligning absolutely positioned div while maintaining fluidity在保持流动性的同时左对齐绝对定位的 div
【发布时间】：2015-05-18 18:05:46
【问题描述】：

我有以下 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; 并调整结果面板的宽度。

是一种右对齐rightdiv而不重叠的方法吗？浮动目前不是解决方案。

【问题讨论】：

当#outer 变窄时，#left 和 #right 是否仍表现为 2 列？或者在这种情况下是否应该垂直堆叠，按什么顺序？
@NicolasLeThierryd'Ennequin，它们可以堆叠，left 位于顶部。

标签： html css fluid-layout

【解决方案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

【讨论】：

这是最接近我需要的解决方案。不过有一个小问题：left div 的宽度随着outer div 的宽度而变化——这仅在“碰撞”后可见。
它有效，谢谢。 Flex就是我的想法。我将接受这个作为答案，因为它是提供的最优雅的解决方案。不过有一个问题：有没有办法保持left 容器的高度，并可能隐藏right 的溢出内容？
我不这么认为，我需要做更多的研究，但隐藏溢出并不是 flexbox 的真正意义所在，
item 元素在 IE 10 上不会中断。您有解决方案/解决方法吗？
我没有，但你可以阅读更多关于 flexbox Here

【解决方案2】：

据我了解，您需要以下内容。

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

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

查看Fiddle Here.

将width: 100%; 给.right 将坚持右div 到右对齐。

检查更新Fiddle Here.

【讨论】：

不幸的是，这并没有解决我问题的“右对齐rightdiv”部分。
不...我需要整个 right div 右对齐。请查看原始小提琴并取消注释right:0px;。
感谢您的解决方案。不幸的是display: table-cell; 并没有真正符合项目设计的整体“结构”。但是，这并不意味着您的解决方案不能涵盖我要求的所有内容。您的解决方案是有效的。

【解决方案3】：

为您的#right 元素使用弹性盒模型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/

【讨论】：