0

我正在尝试将图像放入 div 中。它实际上是一个多系列的div。有一个显示标签“协作”的 div。我希望图像“expandImg”出现在标签“Collab”旁边。尽管可见性最初是“隐藏的”，但我通过脚本对其进行了修改。请查看下面的代码，让我知道为什么图像“expandImg”没有出现在 div 中：

#top-stuff {
    left:0px;
    position:absolute;
    bottom:0px;
    width:216px;
    z-index:12;
    height:30px;
}

#top-bar-out {
    display:block;
    left:0px;
    bottom:0px;
    position:relative;
    width:216px;
    height:30px;
    background: -moz-linear-gradient(center top, #333333, #111111);
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
    background:  -o-linear-gradient(top, #333333, #111111);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#111111');
    box-shadow:0 1px 2px #666666;
    -webkit-box-shadow: 0 1px 2px #666666;
}

.active-links {
    position:absolute;
    left:0px;
    bottom:0px;
    height:30px;
    width:216px;
}
#container {
    width:216px;
    margin:0 auto;
    position: relative;
    left:0px;
    bottom:0px;
}

#topnav {
    text-align:centre;
    left:0px;
    bottom:0px;
    height:30px;
    width:216px;
}

#session {
    cursor:pointer;
    display:inline-block;
    left:0px;
    bottom:0px;
    width:216px;
    height:30px;
    padding:10px 12px;
    vertical-align: top;
    white-space: nowrap;
}

#session.active, #session:hover {
    background:rgba(255,255,255,0.1);
    color:fff;
    width:216px;
}


a#collab-link {
    color:#bababa;
    position:relative;

}

a#collab-link em {
    font-size:10px;
    font-style:normal;
    margin-right:4px;
}

a#collab-link strong {
    color:#fff;
}


#collab-dropdown {
    background-color:#202020;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    box-shadow:0 1px 2px #666666;
    -webkit-box-shadow: 0 1px 2px #666666;
    height:320px;
    width:216px;
    position:absolute;
    left:0px;
    bottom:31px;
    display:none;
}

.frame {
    position: absolute;
}

<div id="top-stuff" style="visibility: hidden;"> 
    <div id="top-bar-out"> 
        <div id="container"> 
            <div id="topnav"> 
                <div class="active-links"> 
                    <div id="session"> 
                        <a id="collab-link" href="#"> 
                        <strong>Collab</strong>
                        </a>
                        <img id="expandImg" src="styles/images/dt_down.png" 
                         align="right" style="position: absolute;"/>                                            
                    </div> 

                    <div id="collab-dropdown"> 
                        <iframe src="IQWFrontController?handler=CLB00001" style="{padding:0px; position:absolute; display: block;}"  
                        scrolling=auto width="100%" height="100%"></iframe>  
                    </div>

                </div>                   
            </div>              
        </div>           
    </div>       
</div>

谢谢

4

3 回答 3

0

既然您已经将它绝对定位，那么添加 top 和 left 属性以将其放置在您希望它出现的位置

于 2012-05-31T12:36:44.030 回答
0

右对齐在这里不起作用！对于样式 attr 中的 expandImg，添加 top:0 和 lef:0

<img id="expandImg" src="styles/images/dt_down.png" style="position: absolute;top:0;left:0;" />

如果图像不显示，则尝试修复图像的地址或检查您的脚本以再次更改可见性！

我还注意到一切都是绝对定位的。如果少数情况和浏览器这可能会导致元素相互溢出，因此请尝试使用元素的相对定位！

于 2012-05-31T12:44:27.187 回答
0

我已经解决了这个问题。虽然我已将图像添加到文件夹结构中，但它们在 Eclipse 中不可用。太傻了，我没有注意到。在我刷新 Eclipse 上的文件夹后，图像开始显示。非常感谢你们的投入。

于 2012-06-01T10:58:23.533 回答