Question

我的问题是当我调整窗口大小（较小）我的一个div只是通过我的导航栏...这很烦人，但我相信有一个简单的方法来解决它。我可以给你代码，但是应该在编辑器程序中测试它 - 然后调整大小，你会明白我的意思。

HTML CODE HERE：

<!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 {




  }

Answer 1

制作#leftnavigation AND #mainContainer div float:left

Answer 2

设置为maincontainer div和overflow:auto;属性。这将禁止在浮动元素上重叠。

调整大小时，两个div正在相互通过

2 个答案: