防止在更改大小时重叠

Question

当用户更改内容的大小时，如何防止块与其余内容重叠（通常为Ctrl+Scroll）。

以下是我正在开发的网站：http://irchound.tk/我在主页上遇到了问题。如果缩小，则表格与左侧的内容重叠。

我正在使用页边空白来放置排名、新闻推送、IRC统计和；IRC表格在右边，整个页面的左右两边都有边距，以保持内容在中心

这是我使用的代码类型：

<div id="page">
<content>
<table id="news">
<content>
</table>
<other tables with id "news">
</div>

然后是其余内容。以下是CSS网站：http://irchound.tk/CSS.css

如有任何帮助，我们将不胜感激。谢谢

Answer 1

您的网站的整体结构实现得很差，您永远不应该使用<br>标记来引入空白，为此请使用CSS。

目前，元素的层次结构是导致元素重叠的原因，从你的布局来看，我认为你会想要更像这样的东西：

#mainWrapper {
  width: 600px;
  height: 100%;
}
#navigation {
  height: 50px;
  background: #000;
  margin-bottom: 5px;
}
#navigation ul {
  padding-top: 15px;
} 
#navigation li {
  display: inline;
  color: white;
  padding-right: 20px;
  padding-top: 0px;
}
#pageBody {
  width: 70%;
  display: inline-block;
  background: red;
  height: 300px;
}
#newsFeed {
  width: 29%;
  float:right;
  display: inline-block;
  height: 300px;
}
.newsSection {
  background: blue;
  height: 97px;
  margin-top: 0px;
  margin-bottom: 5px;
}
.newsSection p {
  margin: 0px;
}
footer {
  color: white;
  background: black;
  height: 50px;
  margin: 0px;
}

<div id="mainWrapper">
   <header>
      <nav id="navigation">
         <ul>
           <li>Some Link</li> 
           <li>Some Link</li> 
           <li>Some Link</li> 
         </ul>
      </nav>
   </header>
  
   <section id="pageBody">
     <p>Some content about the page here</p>
   </section>
  
   <aside id="newsFeed">
      <div class="newsSection">
        <p>Some news info</p>
      </div>
     
     <div class="newsSection">
       <p>Some news info</p>
     </div>
     
     <div class="newsSection">
       <p>Some news info</p>
     </div>
   </aside>
      
   <footer>
     <p>Here is some footer</p>
   </footer>
</div>

现在你会注意到，如果你把我提供的片段作为一个完整的页面来查看，它不会随着你放大或缩小而改变——我没有提供任何响应设计，但这应该是你的一个开始。