css - 侧边栏在缩小时向下移动

Question

我的网站有问题。当我缩小时，侧边栏移动到我的主要内容下方。这是 website .这是我的代码，

<div id="content_main" >
                    <div id="content_center">
                            <div id="news_spotlight_container">

                                    <div class="news">
                                    <h2 style=" border-bottom: 6px solid #000000; letter-spacing: 2px;color: #565347; ">WELCOME</h2>
                                            <div class="newsitem">
                                            <br class="clear">
                                                    <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Message From Chair Person</a></h3>
                                                            <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou. </p> 
                                            </div>

                                            <br class="clear">
                                             <div class="newsitem">
                                                    <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Research</a></h3>
                                                            <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou.</p> 
                                            </div>
                                            <br class="clear">
                                             <div class="newsitem">
                                                    <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Extra Curricular Activities</a></h3>
                                                            <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou.</p> 
                                            </div>
                                            <br class="clear">
                                            </div> <!-- End news -->

                                            <div id="more-stories">
                                                    <div>
                                                            <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Quick Links</h2> 
                                                    </div>
                                                     <ul id="newslinks">
                                                            <li><a href="#">BE Time Table</a></li>
                                                            <li><a href="#">Lab Workbooks</a></li>
                                                            <li><a href="#">Final Year Projects</a></li>
                                                            <li><a href="#">Contact Us</a></li>
                                                    </ul>

                                            </div>
                                              <div id="more-stories">
                                                    <div>
                                                            <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Hall of Fame</h2> 
                                                    </div>
                                                     <ul id="newslinks">
                                                            <li><a href="#">Shams Uddin</a></li>
                                                            <li><a href="#">Fahad Qasim</a></li>
                                                            <li><a href="#">Zain Akhtar</a></li>
                                                    </ul>

                                            </div>
                                            <div id="more-stories">

                                                    <div>
                                                            <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Events</h2> 
                                                    </div>
                                                     <ul id="newslinks">
                                                            <li><a href="#">TechElete</a></li>
                                                            <li><a href="#">Vision</a></li>
                                                            <li><a href="#">Poster Competition</a></li>
                                                            <li><a href="#">Cache</a></li>
                                                    </ul>
                                            </div>  

                                            <p><!-- End more-stories -->
                                              <br class="clear">
                                            </p>
                                            <div style="width:100%; border-right:0px;"  class="news" >
                                                        <h2 style=" border-bottom: 6px solid  #000000 ;
                                                                        letter-spacing: 2px;
                                                                        ">
                                                                    <a href="#">About CISE</a>
                                                        </h2>
                                                      <br class="clear">
                                                      <img class="image_news" src="CIS_files/cis_view.png" alt="cis view" />
                                      <p>The department of Computer Information &amp; Systems Engineering (CISE) was established in July 1997. The department has been a pioneer at NED University in many respects. We have set trends that have been followed by many other departments. <br><br>Currently, the department offers a four year bachelors program in morning and masters program in morning as well in evening.</p>

                              </div>
                            </div> <!-- End news_spotlight_container -->
                            <br class="clear">
                    </div><!-- End content_center -->
            </div> <!-- End content_main -->

Answer 1

如果你想适应缩放，你需要给浏览器一些像素余地。例如——如果你有一个 1px 的边框并且你缩小了，那些边框在屏幕上仍然必须是 1px，但是容器可能会少几个像素。如果您正在计算精确像素值的宽度和位置，浏览器将不得不调整定位以适应抽筋。

对于您的情况，是 border-right: 1px solid #EAE9E6; 导致了超宽。