Php 将文本与带内联块的div底部对齐

我无法将一些文本对齐到作为内联块显示的div的底部

但是我不能把文本“BackOffice”放在div的右下角

我尝试使用垂直对齐。我用过divs，divs的内部，divs的内部，等等，我也试过表格单元格，没有什么真正有效的

有什么想法吗？（是的，我在这个网站和其他论坛上读过几乎每一个帖子，没有什么真正有效的

这是我的密码。 谢谢

第一箱、第二箱、第三箱、第四箱、第五箱{
宽度：20%；
高度：200px；
左边距：自动；
右边距：自动；
显示：内联块；
颜色：白色；
}
#第一箱{
背景：url（/images/black.jpg）；
}
#第二箱{
背景：url（/images/blue.png）；
}

---

您可以通过将

位置：相对

添加到父元素，并将

位置：绝对

添加到具有两个以上属性的子元素来实现这一点，如下所示

#firstBox, #secondBox, #thirdBox, #fourthBox, #fifthBox{position:relative}
#firstBox a, #secondBox a, #thirdBox a, #fourthBox a, #fifthBox a{position:absolute; bottom:5px; right:5px}

或

---

通过将以下属性添加到

#firstBox、#secondBox、#thirdBox、#fourthBox、#fifthBox

中，您可以实现它

显示：表格单元格；垂直对齐：底部；文本对齐：右

您可以通过将

位置：相对

添加到父元素，将

位置：绝对

添加到子元素，再添加两个pro来实现此目的如下图所示

#firstBox, #secondBox, #thirdBox, #fourthBox, #fifthBox{position:relative}
#firstBox a, #secondBox a, #thirdBox a, #fourthBox a, #fifthBox a{position:absolute; bottom:5px; right:5px}

或

---

通过向

#firstBox、#secondBox、#thirdBox、#fourthBox、#fifthBox添加以下属性

，可以实现以下功能

显示：表格单元格；垂直对齐：底部；文本对齐：右侧

Flexbox可以做到：

*{
框大小：边框框；
保证金：0；
填充：0；
}
.标题{
显示器：flex；
}
#第一箱，
#第二箱，
#第三箱，
#第四箱，
#第五箱{
宽度：20%；
高度：200px；
显示器：flex；
对齐项目：柔性端；
证明内容：柔性端；
颜色：白色；
边框：1px纯绿色；
}

---

Flexbox可以做到：

*{
框大小：边框框；
保证金：0；
填充：0；
}
.标题{
显示器：flex；
}
#第一箱，
#第二箱，
#第三箱，
#第四箱，
#第五箱{
宽度：20%；
高度：200px；
显示器：flex；
对齐项目：柔性端；
证明内容：柔性端；
颜色：白色；
边框：1px纯绿色；
}

我喜欢使用“相对+绝对”定位

请尝试以下代码：

#行{
宽度：100%；
}
#第一箱，
#第二箱，
#第三箱，
#第四箱，
#第五箱{
宽度：20%；
高度：200px；
保证金：0；
显示：块；
位置：相对位置；
浮动：左；
}
#第一箱{
背景色：黑色；
}
#第二箱{
背景颜色：蓝色；
}
#第三箱{
背景颜色：绿色；
}
#第四箱{
背景颜色：紫色；
}
#第五箱{
背景颜色：黄色；
}
.内容{
位置：绝对位置；
底部：0；
右：0；
}
a{
文字装饰：无；
颜色：白色；
浮动：对；
}

我喜欢使用“相对+绝对”定位

请尝试以下代码：

#行{
宽度：100%；
}
#第一箱，
#第二箱，
#第三箱，
#第四箱，
#第五箱{
宽度：20%；
高度：200px；
保证金：0；
显示：块；
位置：相对位置；
浮动：左；
}
#第一箱{
背景色：黑色；
}
#第二箱{
背景颜色：蓝色；
}
#第三箱{
背景颜色：绿色；
}
#第四箱{
背景颜色：紫色；
}
#第五箱{
背景颜色：黄色；
}
.内容{
位置：绝对位置；
底部：0；
右：0；
}
a{
文字装饰：无；
颜色：白色；
浮动：对；
}

---

为了完整起见，为了直接回答问题，下面介绍如何使用

显示：内联块；

-

*{
框大小：边框框；
保证金：0；
填充：0；
}
.header>div{
文本对齐：右对齐；
}
.header>div:：after{
内容：''；
线高：200px；
}
.标题>分区*{
显示：内联块；
垂直对齐：底部对齐；
}
#第一箱，
#第二箱，
#第三箱，
#第四箱，
#第五箱{
宽度：20%；
高度：200px；
显示：内联块；
颜色：白色；
边框：1px纯绿色；
右边距：-4px；
}

---

为了完整起见，为了直接回答问题，下面介绍如何使用

显示：内联块；

-

*{
框大小：边框框；
保证金：0；
填充：0；
}
.header>div{
文本对齐：右对齐；
}
.header>div:：after{
内容：''；
线高：200px；
}
.标题>分区*{
显示：内联块；
垂直对齐：底部对齐；
}
#第一箱，
#第二箱，
#第三箱，
#第四箱，
#第五箱{
宽度：20%；
高度：200px；
显示：内联块；
颜色：白色；
边框：1px纯绿色；
右边距：-4px；
}

很高兴有人建议使用Flexbox。谢谢flex。flex工作起来很有魅力。桌子什么都不做，但我已经找到了我的解决方案！干杯，伙计！flex不支持IE<10版本，这就是为什么我给出了一个可以回到IE8的替代选项。很高兴有人建议使用Flexbox。谢谢flex工作起来很有魅力。桌子什么都不做，但我已经完成了准备好找到我的解决方案了！干杯，伙计！Flex不支持IE<10版本，这就是为什么我给出了一个可以回到IE8的替代选项。