0

div内に画像を配置しようとしています。これは実際には複数の一連のdivです。「Collab」というラベルを表示するdivがあります。「Collab」というラベルの横に「expandImg」という画像を表示したいと思います。可視性は最初は「非表示」ですが、スクリプトを使用して変更します。以下のコードを参照して、画像「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

問題を解決しました。フォルダー構造に画像を追加しましたが、日食では利用できませんでした。とてもばかげているので気づかなかった。Eclipseでフォルダを更新した後、画像が表示され始めました。入力してくれてありがとう。

于 2012-06-01T10:58:23.533 に答える
0

絶対に配置したので、上と左の属性を追加して、表示したい場所に配置します

于 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 に答える