html - 不相关的 div 相互插入。 CSS3，HTML

Question

我的网页布局有一个奇怪的行为。当我在“sideBar”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;尝试将其更改为 clear:right;或删除它