Html 如何在页面底部放置元素而不声明位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4573363/
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
How to place an element at the bottom of a page, without declaring a position?
提问by Earl Larson
I have a row of icons that need to be at the bottom of the page, they also need to be fixed. Simple, right? Not. When you position them fixed, the icons fall into one another so only one icon shows. Well there goes that, but there also goes the chance of placing them at the bottom of the page since I need
我有一排图标需要在页面底部，它们也需要固定。很简单吧？不是。当您将它们固定时，这些图标会相互重叠，因此只显示一个图标。嗯，就是这样，但也有机会将它们放在页面底部，因为我需要
#icons {
position:fixed;
bottom:0;
}
I could always manually place them, but this means they cant be fixed like I need them too, and I would have to declare it for different browsers. Help?
我总是可以手动放置它们，但这意味着它们不能像我需要它们一样修复，我必须为不同的浏览器声明它。帮助？
Link to website:Roseannebarr.tumblr.com
网站链接：Roseannebarr.tumblr.com
Here is an example of my HTML
这是我的 HTML 示例
<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
<div id="tooltip">
{LinkOpenTag}<img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
</div>
回答by vhanla
Fixed position is what it says, 'fixed', and you are using the same position for all of them.
固定位置就是它所说的“固定”，并且您对所有这些位置都使用相同的位置。
The best way is not to use position:fixed in #outer, instead try with display:inline; and better yet, I see they are inside #holder, use fixed in #holder and modify #tooltip so it can be shown above because it is what is showing the content.
最好的方法是不要在 #outer 中使用 position:fixed，而是尝试使用 display:inline; 更好的是，我看到它们在#holder 内，在#holder 中使用fixed 并修改#tooltip 以便它可以显示在上面，因为它是显示内容的内容。
For example:
例如：
#holder{
bottom: 0px;
left: -382.5px;
margin: 0px auto 0px 50%;
margin-left: 50%;
position: fixed;
width: 765px;}
#tooltip{
background: #6CB4E2;
border-top: 30px solid white;
display: none;
left: 50%;
margin-left: -382px;
padding: 10px;
position: absolute;
bottom: 51px;
width: 745px;}
#outer {
background: #6CB4E2;
bottom: 0px;
display: inline;
float: left;
margin-top: -8px;}
回答by Jesse Bunch
I would wrap your icons in a div like this:
我会将您的图标包装在这样的 div 中：
<div id="myicons_container">
<img src="icon1.gif">
<img src="icon2.gif">
<img src="icon3.gif">
<img src="icon4.gif">
<img src="icon5.gif">
</div>
<style type="text/css" media="screen">
#myicons_container {
position: fixed;
bottom: 0;
}
</style>
Edit: Per your comment, I would suggest re-writing your code to collect the icons in a container element. But, you might get away with this (haven't tested in any browsers):
编辑：根据您的评论，我建议您重新编写代码以收集容器元素中的图标。但是，您可能会逃脱（尚未在任何浏览器中进行测试）：
<style type="text/css" media="screen">
.block {
width: 50px;
height: 50px;
float: left;
position: fixed;
bottom: 0;
}
</style>
Note: you have to give floated items a width and height.
注意：您必须为浮动项目指定宽度和高度。
One other note, in your code, you will have multiple elements with the same ID attribute. This is a no-no. You'll need to change it to a class like I've done in the CSS above.
另一个注意事项是，在您的代码中，您将拥有多个具有相同 ID 属性的元素。这是一个禁忌。您需要将其更改为一个类，就像我在上面的 CSS 中所做的那样。
