2

私の問題は、ウィンドウのサイズを変更するときです（小さい） divの1つがナビゲーションバーの上を通過するだけです...これは面倒ですが、簡単に修正できる方法があると思います。コードを提供できますが、エディター プログラムでテストする必要があります。その後、サイズを変更すると、私の意味がわかります。

HTML コードはこちら:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WorkFieldStartpage.css"/>


</head>
<body>
<div id="upperblock">


</div>

<div class="topbar"></div>  



   <div id="pageContainer">

       <div id="pageContainer2">


                <div>
                    <div id="leftnavigation">
                        <ul>
                        <li> <h4> Navigation </h4> </li>    
                        <li>Test text</li>
                        <li>Test text</li>
                        <li>Test text</li>

                        </ul>


                        </div>
                    <div id="mainContainer">

                        <div id="newsfeed"></div>



                    </div>

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

   </body>
 </html>

CSS:

body {
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;

}

div {
display: block;   



}



.topbar {
 font-family: sans-serif;
font-size:12px;
font-weight: bold;
background-color: #11BD83;
height: px;
width: 100%;
position:fixed;
left: 0px;
top: 0px;

}


#pageContainer {
margin: 0 auto;
position: relative;
zoom: 1;
min-height: 600px;
}

#pageContainer2 {
margin: 0;
outline: none;
padding: 0;
width: auto;



}

ul {
list-style-type: none;
}

h4 {
text-decoration:underline;



}





#mainContainer {
display: block;
width: 620px;    
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
min-height: 800px;
margin-left: auto ;
margin-right: auto ;
margin-top: 58px;   
}

 #leftnavigation {
 float: left;
 height: 300px;
 width: 120.5px;
 text-align: left;
 font-family: sans-serif;
 font-size: 15px;
 padding-right: 30px;
 display:block;




}



  #newsfeed {




  }
4

2 に答える 2

0

maincontainerdiv anoverflow:auto;プロパティに設定します。これにより、フローティング要素のオーバーラップが無効になります。

于 2013-09-14T21:14:13.887 に答える