html - 是否可以底部对齐 float 的 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 的功能移动到红色 div 下面，这不会发生在绝对位置上。

这可行吗？

Answer 1

这个布局可以用 flexbox 来完成。

它满足您的两个要求:

• 蓝色 div 与右下角对齐

• 当窗口尺寸缩小时，蓝色div移动到红色div下方

  除了当您在容器上设置 display:flex 时， float 对元素没有影响。 [因此，如果您愿意，您甚至可以将 float:left; 和 float:right 留在左侧和右侧元素上 - 但要知道它们什么都不做]

  Note that float, clear and vertical-align have no effect on a flex item.

  ( CSS-tricks )

Updated 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>