网页的两个元素之间的错位

Question

我有一个简短的问题，关于为什么我的网页格式无法正常工作。我是Stack Overflow的新手，所以如果我的代码格式不正确，请原谅我。

我正在尝试构建一个网页，该网页的左侧为静态菜单，中间为滚动元素。问题在于，将HTML和CSS放在一起后，静态菜单会与页面正确对齐，而中间的div则在页面上向下偏移几个空格。我在某处输入了多余的空格吗？还是我的代码有误？

#profile_followers {
  float: left;
  text-decoration: none;
  list-style-type: none;
  background-color: white;
  border-radius: 5px;
  padding: 5px;
  position: fixed;
  overflow: auto;
}

.pfollowerstitle {
  font-weight: bold;
  width: 175px;
  overflow: auto;
}

.pfollowers {
  width: 175px;
  overflow: auto;
}

#profiles_following {
  float: left;
  text-decoration: none;
  list-style-type: none;
  background-color: white;
  border-radius: 5px;
  padding: 5px;
  position: fixed;
  overflow: auto;
}

.pfollowingtitle {
  font-weight: bold;
  width: 175px;
  overflow: auto;
}

.pfollowing {
  width: 175px;
  overflow: auto;
}

#your_posts {
  margin-left: 200px;
  text-decoration: none;
  background-color: white;
  color: black;
  border-radius: 5px;
  padding: 5px;
  overflow: auto;
  width: 700px;
  position: auto;
}

<div>
  <ul id="profile_followers">
    <li class="pfollowerstitle" font-weight="bold"><a href="">Recent followers</a></li>
    <li class="pfollowers"><a href="">Recent follower 1</a></li>
    <li class="pfollowers"><a href="">Recent follower 2</a></li>
    <li class="pfollowers"><a href="">Recent follower 3</a></li>
  </ul>

  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

  <ul id="profiles_following">
    <li class="pfollowingtitle"><a href="">Recently followed</a></li>
    <li class="pfollowing"><a href="">Recent followed 1</a></li>
    <li class="pfollowing"><a href="">Recent followed 2</a></li>
    <li class="pfollowing"><a href="">Recent followed 3</a></li>
  </ul>
</div>

<div id="your_posts">
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
  <h1>hello</h1>
</div>

</div>

以下是问题的照片：https://imgur.com/a/jSeviev

如果还有其他格式问题或可以提高代码效率的地方，请告诉我。谢谢！

Answer 1

主div占据了整个宽度，并且
使主div向下移动了很多行，因此没有对齐。

这是您要构建的多列布局。检查一下： https://jsfiddle.net/tbpuL3xa/

说这是您的2个div：

<div id="menu">
</div>
<div id="id_posts">
</div>

现在执行以下操作：

• make菜单（左div）浮动，因此两个div可以在同一行（顶部对齐）。

• 在菜单div上设置固定宽度，并在主div上设置相同的左边距，这样它们就不会重叠。

#menu {
  float: left;
  width: 180px;
}

#your_posts {
  margin-left: 200px;
}

Answer 2

您需要给您的第一个div一个类或ID，以便您可以操纵其样式：

        .list-wrap {
          position: relative;
          float: left;
        }

        #profile_followers {
          float: left;
          text-decoration: none;
          list-style-type: none;
          background-color: white;
          border-radius: 5px;
          padding: 5px;
          position: fixed;
          overflow: auto;
        }
        
        .pfollowerstitle {
          font-weight: bold;
          width: 175px;
          overflow: auto;
        }
        
        .pfollowers {
          width: 175px;
          overflow: auto;
        }
        
        #profiles_following {
          float: left;
          text-decoration: none;
          list-style-type: none;
          background-color: white;
          border-radius: 5px;
          padding: 5px;
          position: fixed;
          overflow: auto;
        }
        
        .pfollowingtitle {
          font-weight: bold;
          width: 175px;
          overflow: auto;
        }
        
        .pfollowing {
          width: 175px;
          overflow: auto;
        }
        
        #your_posts {
          margin-left: 200px;
          text-decoration: none;
          background-color: white;
          color: black;
          border-radius: 5px;
          padding: 5px;
          overflow: auto;
          width: 700px;
          position: auto;
        }

   <div class="list-wrap">
      <ul id="profile_followers">
        <li class="pfollowerstitle" font-weight="bold"><a href="">Recent followers</a></li>
        <li class="pfollowers"><a href="">Recent follower 1</a></li>
        <li class="pfollowers"><a href="">Recent follower 2</a></li>
        <li class="pfollowers"><a href="">Recent follower 3</a></li>
      </ul>
    
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    
      <ul id="profiles_following">
        <li class="pfollowingtitle"><a href="">Recently followed</a></li>
        <li class="pfollowing"><a href="">Recent followed 1</a></li>
        <li class="pfollowing"><a href="">Recent followed 2</a></li>
        <li class="pfollowing"><a href="">Recent followed 3</a></li>
      </ul>
    </div>
    
    <div id="your_posts">
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
      <h1>hello</h1>
    </div>
    
    </div>