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

概述我想避免使用position：absolute;因为我想保留父容器缩小时的功能,div将它们自己定位在另一个之下,而不是重叠. #container { border:1px solid;}#left { float:left; width:100px; height:100px; background:red;}#right { flo 我想避免使用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 ></div></div>

编辑：我已经更新了代码示例,使其更像我自己的实际外观.不幸的是,我没有使用固定宽度/高度,但对于这个特殊问题,红色div可以有固定的宽度/高度.

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

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

这可行吗？

解决方法 这种布局可以使用flexBox完成.

它满足您的要求：

>蓝色div与右下角对齐
>当窗口大小缩小时,蓝色div移动到红色div下方

除了在容器上设置display：flex时,浮动对项目没有影响. [所以如果你喜欢你甚至可以离开浮子：左;和浮动：右边的元素 – 但知道它们什么都不做]

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>

总结

以上是内存溢出为你收集整理的HTML – 是否可以底部对齐浮动div？全部内容，希望文章能够帮你解决HTML – 是否可以底部对齐浮动div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。