html 定位底部对齐,HTML – 是否可以底部对齐浮动div？

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

它满足您的要求：

>蓝色div与右下角对齐

>当窗口大小缩小时,蓝色div移动到红色div下方

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

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

item.

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

}

• item1
• item1
• item1
• item1
• item1
• item1