Html 将图像与页面底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17737867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align images to bottom of page
提问by Eric Wolf
This seems to be a common problem but I'm having trouble. When I set my css with
这似乎是一个常见问题，但我遇到了麻烦。当我设置我的 css 时
position: absolute;
bottom: 0;
, all my images end up overlapping each other, instead of being displayed next to each other, on the bottom. How do I fix this?
，我的所有图像最终都会相互重叠，而不是在底部彼此相邻显示。我该如何解决？
Edit:I can't encase them in their own div because when clicked, the targeted image is supposed to go to the top of the page
编辑：我无法将它们包含在自己的 div 中，因为单击时，目标图像应该转到页面顶部
:target{
position:absolute;
top:0
}
Edit: Code:: http://jsfiddle.net/5MXLb/
编辑：代码:: http://jsfiddle.net/5MXLb/
div#main{
text-align: center;
}
.gallery{
display: inline-block;
height: 100%;
}
.gallery img{
display: inline-block;
max-height: 10%;
bottom: 0;
position: absolute;
}
.gallery img:target{
position: relative;
top: 0;
max-height: 90%;
}
HTML:
HTML：
<div id="main">
<div class="gallery">
<a href="#img1"><img id="img1" src="http://placehold.it/200" /></a>
<a href="#img2"><img id="img2" src="http://placehold.it/400" /></a>
<a href="#img3"><img id="img3" src="http://placehold.it/600" /></a>
<a href="#img4"><img id="img4" src="http://placehold.it/800" /></a>
<a href="#img5"><img id="img5" src="http://placehold.it/1000" /></a>
</div>
</div>
回答by Praveen
Wrap the images within a div positioned in absolute and place it at the bottom like
将图像包裹在绝对定位的 div 中，并将其放置在底部，例如
<div>
<img src="http://dummyimage.com/100x100/000/ff0000" />
<img src="http://dummyimage.com/100x100/000/ff0000" />
</div>
CSS:
CSS：
div {
width:100%;
position: absolute;
bottom:0;
}
img {
position: relative;
display: block;
float: left;
}
Check this fiddle
检查这个小提琴
回答by kalley
If you're only targeting newer browsers, you can use flexbox. http://jsfiddle.net/5MXLb/1/
如果您只针对较新的浏览器，则可以使用 flexbox。http://jsfiddle.net/5MXLb/1/
I've only included the -webkitprefixed versions.
我只包含了带-webkit前缀的版本。
div#main{
text-align: center;
height: 100%;
}
html, body { height: 100%; }
.gallery{
display: -webkit-flex;
height: 100%;
-webkit-align-items: flex-end;
-webkit-justify-content: center;
}
/* this stops the shrinking of the items */
.gallery a {
-webkit-flex-shrink: 0;
}
.gallery img{
display: inline-block;
max-height: 10%;
}
.gallery img:target{
position: absolute;
top: 0;
max-height: 90%;
left: 50%;
-webkit-transform: translateX(-50%);
}
But I think this does what you're looking for.
但我认为这可以满足您的要求。
回答by Ishan Jain
Set CSS on your <a>-
在您的<a>-上设置 CSS
.gallery a{
display: inline-block;
margin-right: 20px;
width:30px;
}
After Update -
更新后 -
