如何将div与另一个div并排？侧边栏置顶布局问题求助

你的核心问题是同时给侧边栏用了float:right和position:fixed，这两个属性会冲突——fixed定位的元素会脱离文档流，浮动属性对它完全无效，反而会干扰布局。另外你的主内容没有预留侧边栏的空间，会被侧边栏覆盖。按下面的步骤修改：

关键修改点 #

• 删掉侧边栏的float:right，fixed定位不需要浮动来控制位置
• 用right属性代替margin来固定侧边栏的右侧位置，避免布局偏移
• 给主内容区域添加右侧内边距，防止内容被侧边栏遮挡
• 修正HTML里重复的id="teaser-title"（id必须唯一，改成class）

修改后的完整代码 #

CSS部分 #

/* main content */
.container {
  box-shadow: 0px 0px 5px #000;
  padding: 0;
  background: rgba(255, 255, 255, 0.7);
  /* 给主内容预留侧边栏的宽度+间距 */
  padding-right: 450px;
}

.hightlight {
  margin: 5px 15px 0px 15px;
}

/* 把重复的id改成class */
.teaser-title {
  background-color: #555;
  padding: 5px;
  margin: 15px 5px 0px 15px;
  color: #fff;
  font-family: Geometos;
  width: 855px;
}

/* sidebar content */
.sidebar {
  background-color: rgba(255, 255, 255);
  border: 2px solid rgba(193, 193, 193, 1.00);
  height: 100vh; /* 用100vh代替100%，确保占满视口高度 */
  width: 419px;
  position: fixed;
  top: 0;
  right: 15px; /* 直接固定右侧位置，代替margin-right */
  margin-top: 5px;
}

/* recent content */
.one,
.two {
  margin: 5px;
}

.postOne {
  background-color: rgba(255, 255, 255);
  border: 2px solid rgba(193, 193, 193, 1.00);
  margin: 5px 15px 0px 15px;
  display: inline-block;
}

.postTwo {
  background-color: rgba(255, 255, 255);
  border: 2px solid rgba(193, 193, 193, 1.00);
  margin: 5px 15px 15px 0px;
  display: inline-block;
}

HTML部分 #

<div class="container">
  <div class="teaser-title">
    <span>>>> Highlights</span>
  </div>
  <div class="hightlight">
    <img src="images/thumb-1.jpg" width="855" height="400" />
  </div>

  <div class="teaser-title">
    <span>>>> Blog</span>
  </div>

  <div class="postOne">
    <div class="one">
      <a href="#">
        <img src="images/placeholder.jpeg" width="405" height="200" class="top-img" alt="image" />
        <h5>>>>Post Title</h5>
        <p>content goes here</p>
      </a>
    </div>
  </div>

  <div class="postTwo">
    <div class="two">
      <a href="#">
        <img src="images/placeholder.jpeg" width="405" height="200" class="top-img" alt="image" />
        <h5>>>>Post Title</h5>
        <p>content goes here</p>
      </a>
    </div>
  </div>
</div>

<div class="sidebar">
  <p>content here</p>
</div>

额外说明 #

• 用100vh代替height:100%，因为height:100%需要父元素有明确高度才能生效，100vh直接占满当前视口高度
• 把主内容都放进.container里，统一控制内边距，避免侧边栏遮挡内容
• fixed定位的元素会脱离文档流，所以必须给主内容预留足够的右侧空间

内容的提问来源于stack exchange，提问作者eness