如何在不声明位置的情况下将元素放置在页面底部？

Question

我有一排图标需要位于页面底部，它们也需要修复。很简单，对吧？不是。当您将它们固定放置时，图标会相互重叠，因此仅显示一个图标。嗯，就是这样，但也有可能将它们放在页面底部，因为我需要

#icons {
position:fixed;
bottom:0;
}

我总是可以手动放置它们，但这意味着它们无法像我也需要它们一样被修复，而且我必须为不同的浏览器声明它。帮助？

网站链接： Roseannebarr.tumblr.com

这是我的 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>

Answer 1

固定位置就是它所说的“固定”，并且您对所有这些都使用相同的位置。

最好的方法是不要在#outer中使用position:fixed，而是尝试使用display:inline; 更好的是，我看到它们在#holder内，在#holder中使用fixed并修改#tooltip，以便它可以显示在上面，因为它是显示内容的。

例如：

#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;
}