Html 如何在不向下推动div的情况下将三个div对齐

#页脚{
明确：两者皆有；
显示：块；
位置：绝对位置；
底部：0；
}
.集装箱英尺{
显示：内联块；
垂直对齐：顶部；
明确：两者皆有；
}
.集装箱左{
宽度：40%；
}
.集装箱英尺右{
宽度：40%；
}
#条形码{
边缘顶部：48px；
左边距：24px；
右边距：24px；
背景：无；
}
.对{
浮动：对；
}
.左{
浮动：左；
}

这是一个随机文本，用于查看如何使用其他div格式化图像

这是一个随机文本，用于查看如何使用其他div格式化图像

有几种方法可以做到这一点。最简单的方法是使用flexbox。Div是块元素，因此是堆栈。或者，也可以使用内联块

.container-ft{
显示器：flex；
}

这是一个随机文本，用于查看如何使用其他div格式化图像

这是一个随机文本，用于查看如何使用其他div格式化图像

试试这个：

HTML

---

工作版本：

您考虑过使用“flex”吗？

<div class="footer">
<div class="column col-left"><p>this is a random text to see how it formats the image with the other divs</p></div>
<div class="column col-center"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/UPC-A-036000291452.svg/220px-UPC-A-036000291452.svg.png" alt="barcode"/></div>
<div class="column col-right"><p>this is a random text to see how it formats the image with the other divs</p></div>
</div>

.column {
  float: left;
  width: 33.33%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.col-center {
  width: 20%;
  text-align:center;
}