Question

当用户更改内容大小时，如何阻止块与其他内容重叠（Ctrl + Scroll normal）。

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

我正在使用保证金来放置排名，新闻Feed，IRC统计数据＆amp;右侧的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。

目前，元素的层次结构是导致元素重叠的原因，根据您的布局判断我认为您想要更像这样的内容：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

现在您会注意到，如果您查看我作为整页提供的代码段，则在放大或缩小时不会更改 - 我没有提供任何响应式设计，但这应该是您的一个开始。

防止改变大小重叠

1 个答案: