HTML-CSS - 无法将图像下拉到div的底部

Question

我有一张图片，我想把它拉到div的底部。换句话说，我想转换这个：

对此：

我试图用CSS做这个，比如为img创建一个类并执行：

.align-bottom img {
  bottom: 0px;
}

这似乎根本没有做任何事情。如果我将位置设置为绝对，那么它将img放在整个页面的底部而不仅仅是div。怎么办呢？

JSFiddle：http://jsfiddle.net/uezwpw40/

Answer 1

使用bottom仅适用于relative，absolute或fixed位置元素，因此在这种情况下无效。使用这些方法执行此操作的一种方法是删除float:left并使用display: inline-block代替。默认情况下，inline-block元素会与基线对齐（由于间距width原因，您必须更改.col-xs-11的{​​{1}}：

inline-block

FIDDLE

**

或者

**

如果您希望使用.col-xs-1, .col-xs-11{ display: inline-block; float: none; } .col-xs-11{ width: 90%; } ，可以将父bottom设置为.row，将position: relative重置为.col-xs-1并添加position: static你的形象：

position: absolute

ALT FIDDLE

Answer 2

Demo

使用position: absolute;将其与bottom: 0;放在一起，并确保容器的位置设置不是static（如果未指定，则为默认位置）。

<强> CSS：

.titlebox {
    position: relative;
    background-color:#ddd;
    height: 100%;
}
.titlebox img {
    width: 30px;
    position: absolute;
    left: 0;
    bottom: 0;
}

HTML（已更改的部分）：

<div class="titlebox">  
  <img src="http://www.clker.com/cliparts/Y/u/O/S/m/D/pyramid.svg" width="30px">

您不需要将它放在自己的<div>中，只需将它放在任何地方。这绝对是其他因素无关紧要。

Answer 3

你需要使用定位才能像这样使用底部。与此类似的CSS解决方案怎么样：

http://jsfiddle.net/gngur22r/

.titlebox {
    background-color:#ddd;
}

.bottom-background-arrow {
    background-image: url("http://www.clker.com/cliparts/Y/u/O/S/m/D/pyramid.svg");
    background-position: 20px bottom;
    background-size: 30px;
    background-repeat: no-repeat;
    padding-left: 60px;
}

这也允许您保留引导程序所需的.row > .col-*格式。只需根据需要更改背景大小和位置，以便更好地定位。

Answer 4

如果将位置更改为相对位置，则可以将图像放在任何位置：

.titlebox {
    height: 100px;
    background-color:#ddd;
}

.align-bottom img {
    position: relative;
    top: 70px;
}

我给你的.titlebox类增加了一个高度，所以我可以根据其包含的div的尺寸更好地猜测图像的位置。

这是一个小提琴http://jsfiddle.net/uezwpw40/5/