是否可以让浮动的div底部对齐？

Question

我希望避免使用 position: absolute;，因为我想保持当父容器缩小时，div会自动排列在下方而不是重叠在一起的功能。

#container {
    border:1px solid;
}

#left {
    float:left;
    width:100px;
    height:100px;
    background:red;
}

#right {
    float:right;
    background:blue;
}

ul {
    padding:0;
    margin:0;
}

ul li {
    float:right;
    margin-left:20px;
}

<div id="container">
    <div id="left">
    </div>
    <div id="right">
        <ul>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>

编辑：我已更新代码示例，以更加符合实际情况。不幸的是，我没有使用固定的宽度/高度，但对于这个特定的问题，红色div可以有固定的宽度/高度。

更新后的Fiddle：http://jsfiddle.net/zdL60bLu/10/

基本上，我希望蓝色div与右下角对齐，当窗口大小缩小时，保持蓝色div下移的功能，而使用绝对定位不会发生这种情况。

这可行吗？

- clearmend

---

这两个 div 中是否有固定的宽度（像素或百分比）和/或高度？ - Salman A

@SalmanA 红色 div 具有最大宽度（以像素为单位），然后宽度为 50%。蓝色 div 是菜单，将根据内容调整其宽度/高度。 - clearmend

如果您不想在这两个div之间使用<div style="clear:both;"></div>，那么没有其他方法，因为您希望这两个div在屏幕不太窄的情况下堆叠在一起，而在同一行中。一个与另一个相反。我认为使用position:absolute然后在父元素上设置min-height或使用媒体查询将position:absolute切换为float（在某些屏幕宽度下）是可以的。 - Hrvoje Golcic

Answer 1

使用 flexbox 可以实现这种布局。

它同时满足以下两个要求：

• 蓝色 div 对齐到右下角

• 当窗口大小缩小时，蓝色 div 会移动到红色 div 的下方

  请注意，当您在容器上设置 display:flex 时，浮动对项目没有影响。[因此，如果您喜欢，甚至可以在左侧和右侧元素上保留 float:left; 和 float:right - 但知道它们什么都不做]

  请注意，浮动、清除和垂直对齐对 flex 项目没有影响。

  (CSS-tricks)

更新的 Fiddle（调整窗口大小以查看效果）

#container {
  border: 1px solid;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
#left {
  width: 100px;
  height: 100px;
  background: red;
}
#right {
  float: right;
  /* redundant */
  background: blue;
  align-self: flex-end;
}
ul {
  padding: 0;
  margin: 0;
}
ul li {
  float: right;
  margin-left: 20px;
}

<div id="container">
  <div id="left">
  </div>
  <div id="right">
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
  </div>
</div>

- Danield

Answer 2

这个方法有点巧妙，但是有效：给右容器一个与左容器高度相减之后的值作为margin-top（在这个示例中是50px）。然后给左容器一个同样数量但方向相反的负margin-bottom（-50px）。这里有演示：http://jsfiddle.net/zdL60bLu/9/

#left {
    margin-bottom: -50px;
}
#right {
    margin-top: 50px;
}

- Joshua Whitley

---

这是一个很好的答案，不幸的是我的蓝色div实际上没有固定的宽度/高度，我只是简化了代码片段，也许我不应该这样做。我已经更新了代码和fiddle。我可能最终会使用媒体查询来解决这个问题。 - clearmend

感谢澄清。请参见下面的Danield的答案。看起来他/她已经解决了问题。 - Joshua Whitley