1

最初の投稿とnoob。

私はhtml\cssを学んでおり、通常、ここで少し検索するだけでほとんどの問題を解決できます。以下のページの問題を回避できないようです。基本的に、非表示のテキストを保持する div の周りに複数の画像を配置したいと考えています。画像にカーソルを合わせる（または後でクリックする）と、関連するテキストが表示され、次の画像にカーソルを合わせると非表示/変更されます（人とプロファイルを考えてください）

これまでのところ、ページは私が望むことをフルスクリーンで実行しています。ブラウザー ウィンドウを小さくすると、テキストはそのまま残り、他のすべての要素が移動します。image .hover に position:fixed があることはわかっていますが、これが問題です。しかし、 :fixed を他の値に変更すると壊れますか?

私はここでたくさんの答えを読みました。私はそれを理解しようと何時間も費やしましたが、失敗し、非常に単純な問題であると確信している何かを解決できなかったことに不満を感じています。

私が望むのは、ブラウザウィンドウのサイズが変更されるたびに、テキストを保持する div が画像の円の中心になることだけです。これを実現するには、このコードで何を変更する必要がありますか? 私がやりたいことをするためのより良い方法はありますか？

私のフラストレーションを理解していただき、あまり苦労しないでください:-) divを表示\非表示にするまで、配置に問題があったことはありません。

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<title>Untitled</title>

<style>

#image {
    position:relative;
    width:180px;
    height:140px;

}

#image .hover {
    display:none ;
    position:fixed;


}

#image:hover .hover {
    display:block;


}

#wrapper{
    width:960px;
    margin :0px auto ; 
    text-align: center ;
}

#banner{
    height:250px;
}

#content{


}


</style>

</head>

<body>

<div id="wrapper">

    <div id="banner"></div>

    <div id="content">


        <div id="image" style="left: 383px; top: 31px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>

            </div>

        </div>

        <div id="image" style="left: 97px; top: -83px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">

                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>

            </div>


        </div>


        <div id="image" style="left: 652px; top: -272px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left:  440px; top: 480px; width: 388px; height: 440px">

                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>

            </div>

        </div>


        <div id="image" style="left: 91px; top: 50px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">

                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
            </div>

        </div>


        <div id="image" style="left: 370px; top: -80px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left:  440px; top:480px; width: 388px; height: 440px">

                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>


            </div>

        </div>


        <div id="image" style="left: 650px; top: -318px; width: 135px; height: 192px;">
            <img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>

            <div class="hover" style="left:  440px; top: 480px;width: 388px; height: 440px">

            <p>Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
                <p>Eight Lines of text here Eight Lines of text here</p>
            </div>

        </div>

</div>

</div>

</body>

</html>
4

1 に答える 1

1

通常、margin:auto を要素に追加すると機能しますが、position を追加すると機能しない可能性があります。

画面の高さと幅を取得するには、JavaScript (jQuery も含む) を使用するのが最善の方法です。また、サイズ変更時に画面のサイズを再度確認して取得する必要があります。

開始するのに適した投稿は次のとおりです: jQuery を使用して DIV を画面の中央に配置する

JSを使いたくない場合...

次のようなものを試してください: http://jsfiddle.net/RbFnm/10/

#box{margin: auto; background: #000; position: relative; z-index: 1; width: 300px; height: 300px;}
#subbox{background: #ccc; position: absolute; width: 50px; height: 50px; z-index: 3; top: 10px; left: 10px;}
#special{background: #ccc; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 5;}

http://phrogz.net/css/vertical-align/からの垂直方向の配置のヒントとともに

于 2013-03-26T20:08:46.460 に答える