在HTML5中，如果你想将图片布局在盒元素的底部，你可以使用CSS的

本文链接：https://blog.csdn.net/blog_programb/article/details/107103179

在HTML5中，如果你想将图片布局在盒元素的底部，你可以使用CSS的
position
属性，特别是
position: absolute;
与
position: relative;
的结合。这样，你可以将图片相对于其最近的定位祖先元素（即盒元素）进行定位。

以下是一个简单的例子，展示了如何将一张图片放置在盒元素的底部：

HTML代码：

html

这是一些文本内容。

在这个例子中， .box 类被设置为 position: relative; ，这意味着它将成为一个定位上下文。然后，图片元素（）被设置为 position: absolute; ，这意味着它将相对于最近的定位祖先元素（即 .box ）进行定位。通过设置 bottom: 0; ，图片的底部将与盒元素的底部对齐。如果你想让图片靠右对齐，可以添加 right: 0; 。

请注意，你需要将
your-image.jpg
替换为你想要使用的图片的实际路径或URL，并且
alt
属性应该包含描述性文本，以便在图片无法加载时提供替代信息。

此外，如果你的盒元素内有其他内容（如文本），并且你希望图片位于这些内容的底部，你可能需要调整HTML结构，将图片放在内容的后面，或者使用其他布局技术，如Flexbox或Grid，来实现这一点。

浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C
的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border
值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width
属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 !DOCTYPE html即可。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>把图片布局在盒元素底部</title>
<style type="text/css">
#box {
	width:500px;
	height:200px;
	border:1px solid #F90;
	/* 开启盒布局 */
	display:-webkit-box;
	display:-moz-box;
	display:box;	

}
#box div {
	padding:5px;
	border:1px solid #ccc;
	margin:1px;
}
#box div img {
	width:120px;
}
</style>
<body>
<div id="box">
  <div><img src="images/IL1.jpg" /></div>
  <div><img src="images/IL2.jpg" /></div>
  <div><img src="images/IL3.jpg" /></div>
  <div><img src="images/IL4.jpg" /></div>
</div>
</body>
</html>