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

Posted 2023-03-05

【中文标题】是否可以底部对齐浮动的 div？

【英文标题】：Is it possible to bottom align a floated div?

【发布时间】：2015-04-11 22:16:04

【问题描述】：

我想避免使用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 可以具有固定的宽度/高度。

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

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

这可行吗？

【问题讨论】：

div 是否有固定的（像素或百分比）宽度和/或高度？

@SalmanA 红色 div 的最大宽度为 px，宽度为 50%。蓝色 div 是菜单，会根据内容调整其宽度/高度。

如果你不想在这两个 div 之间使用<div style="clear:both;"></div>，那么没有别的办法，因为你想让这两个 div 一个在另一个下面，而它们应该在同一个画面时线不要变窄。一个与另一个相反。我认为可以使用 position:absolute 然后在父元素上设置 min-height 或使用媒体查询来切换 position:absolute 以浮动为特定屏幕宽度

【参考方案1】：

这有点 hacky，但它确实有效：给右容器一个 margin-top，即左容器的高度减去右容器的高度（在本例中为 50 像素）。然后给左边的容器一个相同数量的负边距底部（-50px）。这是它的工作原理：http://jsfiddle.net/zdL60bLu/9/

添加代码：

#left 
    margin-bottom: -50px;

#right 
    margin-top: 50px;

【讨论】：

这是一个很好的答案，不幸的是我的蓝色 div 实际上没有固定的宽度/高度，我只是简化了代码 sn-p，这可能是我不应该的。我已经更新了代码和小提琴。我可能最终只使用媒体查询。

感谢您的澄清。请参阅下面丹尼尔德的回答。看来他/她想通了。

【参考方案2】：

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

它满足您的两个要求：

蓝色 div 与右下角对齐，并且

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

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

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

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