html - 防止在改变尺寸时发生重叠

Question

当用户更改内容大小时(通常为 Ctrl + Scroll)，如何防止 block 与其余内容重叠。

这是我正在开发的网站: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>

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