Question

我的网页布局有一个奇怪的行为。当我在“sideBar”div中添加更多div时，网页的中心部分被推下。它们与中心部分无关。他们有边界，我发现他们远离“主要”div。是否有任何方法可以阻止它，或者我每次添加新div时都应该使用边距。

这是我的HTML代码：

<div id="sideBarLeft">
    <div id='article1'><h3>Article 1</h3><div> //Just added
    <div id='article2'><h3>Article 2</h3><div> //Just added
    <div id='article3'><h3>Article 3</h3><div> //Just added
    <div id='article4'><h3>Article 4</h3><div> //Just added
</div>

CSS代码：

#sideBarLeft {
  position: fixed;
  height: 800px;
  width: 250px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 1px;
  padding-top: 100px;
  padding-left: 5px;
  float: left;
  word-wrap: break-word;
  z-index: 1;
  border: 1px solid #808080;
}

#article1 {
  width: 200px;
  border: 1px solid red;
}

以下是中心部分：

#container{
  margin: 0 auto;
  margin-left: 256px;
  max-width: 600px;
  margin-top: 120px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  float: left;
  width: 600px;
  border: 1px dotted #808080;
}

这是包装器：

#wrapper {
  width: 1200px;
  margin: 0 auto;
}

Answer 1

这很可能是因为你在主要div中有一些东西使用clear：both; 尝试将其更改为清除：正确;或删除它

没有相关的div互相推动。 CSS3，HTML

1 个答案: