Question

我正在尝试将图像放入div中。它实际上是一系列div。有一个div显示标签“Collab”。我希望图像“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>

由于

Answer 1

由于您已经绝对定位，然后添加顶部和左侧属性以将其放置在您希望它出现的位置

Answer 2

对齐右边不会在这里工作！对于样式attr中的expandImg，添加top：0和lef：0

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

如果图片没有显示，请尝试修复图片地址或检查脚本是否再次更改visibillity！

我也注意到一切都是绝对定位的。如果很少的情况和浏览器可能会使元素相互溢出，那么尝试使用元素的相对定位！

Answer 3

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

图像没有出现在div中？是因为CSS吗？

3 个答案: