Question

我想避免使用position: absolute;，因为我想保留父容器缩小时的功能，div将它们自己置于另一个之下，而不是重叠。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

编辑：我已将代码示例更新为更接近我自己的实际外观。不幸的是，我没有使用固定宽度/高度，但对于这个特殊问题，红色div可以有固定的宽度/高度。

更新小提琴：http://jsfiddle.net/zdL60bLu/10/

基本上，我希望蓝色div与右下角对齐，当窗口大小缩小时，保持蓝色div的功能在红色div下方移动，这不会发生绝对的位置。

这可行吗？

Answer 1

这种布局可以使用flexbox完成。

它符合您的要求：

蓝色div与右下角对齐
当窗口大小缩小时，蓝色div移动到红色div
以下
除了在容器上设置display:flex时，浮动对项目没有影响。 [如果你愿意，你甚至可以将float:left;和float:right留在左右元素上 - 但要知道他们什么都不做了]

请注意，float，clear和vertical-align对flex没有影响项目

（CSS-tricks）

Updated Fiddle（调整大小以查看效果）

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

这有点hacky，但它确实有效：给右侧容器一个左侧容器高度的上边距减去右侧容器的高度（在这种情况下为50px）。然后给左容器一个相同数量的负边距 - 底部（-50px）。这是工作：http://jsfiddle.net/zdL60bLu/9/

已添加代码：

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

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

2 个答案:

Updated Fiddle（调整大小以查看效果）