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而不重叠的方法吗？浮动目前不是解决方案。

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

Answer 2

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

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

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

检查Fiddle Here.

将width: 100%;提供给.right意志将右边的div右对齐。

检查更新的Fiddle Here.

Answer 3

将flexbox模型display: flex用于#right元素。

#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，同时保持流动性

3 个答案: