3

サイドバーと重なっているコンテンツがあります。サイドバーコンテナのマージンとパディングを見ると、位置の調整など、さまざまなことを試してみなければならなかったことがわかりますが、何も機能しません-

***スクリーンショットの例：http： //tinyurl.com/cefamyt

***実例 http://www.bestthrillermovielist.com/indextest.php#topofpage

また、サイドバーコンテナを設定された高さ、たとえば4000pxに設定した場合。私が現在持っている方法の代わりに、映画のコンテンツはどれもサイドバーに重なっていない。サイドバーコンテナをウィンドウの高さ全体に伸ばして無駄にしようとしました

#movieinfoのコンテンツは、サイドバーのコンテンツが終了すると、サイドバーのコンテンツとオーバーラップします。#sidebarcontainerのマージン/パディングにより、サイドバーを画面の全長まで拡張できますが、何らかの理由で、＃movieinfoコンテンツは、サイドバーコンテンツが終了する場所の真下にスライドします。

CSS：

#container {
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    overflow:hidden;
}

#movieinfo {
    padding-right:375px;
    margin-top:25px; 
    display:inline;
    position:relative;
}

#sidebarcontainer {
    float: right; 
    width:345px;
    background:#fff;
    margin-bottom: -5000px; 
    padding-bottom: 5000px; 
    height:100%;
    position:relative;
}

#movieright {
    float:right; 
    width:340px;
    height:100%; 


    }

#movierightcontainer {
    float:right;
    width:100%;
    margin-bottom:8px;
    margin-top:0px;
    height:100%;
    padding: 0 2%;

}

.movienav {
    width: 320px;
    height: 430px;
    float: left;
    margin-right: 20px;
    position: relative;
    display:inline;
    margin-top:25px;
    margin-bottom:45px;
}

HTML

<div id="container">
    <div id="movieinfo"> 
        <?php include("sidebar.php");?>
 <div class="movienav"></div>
    </div>
</div>

***SIDEBAR.php***
<div id="sidebarcontainer">
    <div id="movierightcontainer">
        <div id="movieright"></div>
     </div>
</div>

どんな助けでも大歓迎です。

4

1 に答える 1

1

問題は、すべてを入れていることです#container。左の列には、右の列とは別のdivが必要です。右の列が右に浮いていて、コンテンツがなくなったため、映画のポスターが右の列に重なっています。これが、右側の列に高さを追加することが機能した理由です。

jsfiddleで発生する必要があるものの簡略化されたバージョンを作成しました。ポスターを小さくしたので、プレビューウィンドウで見やすくなりました。しかし、概念は正しいです。

これがjsfiddleリンクです。

于 2013-03-05T17:05:26.373 に答える