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

我会将你的图标包装在这样的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>

修改：根据您的评论，我建议您重新编写代码以收集容器元素中的图标。但是，你可能会侥幸成功（未在任何浏览器中测试过）：

<style type="text/css" media="screen">
    .block {
        width: 50px;
        height: 50px;
        float: left;
        position: fixed;
        bottom: 0;
    }
</style>

注意：您必须为浮动项目提供宽度和高度。

另外请注意，在您的代码中，您将拥有多个具有相同ID属性的元素。这是禁忌。您需要将其更改为类似我在上面的CSS中完成的类。

Answer 2

固定位置就是它所说的'固定'，并且你对所有这些位置使用相同的位置。

最好的方法是不要使用位置：固定在#outer中，而是尝试使用display：inline;更好的是，我发现它们在#holder中，在#holder中使用固定并修改#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;}

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

2 个答案: