如何让sidebar与页面右侧文本对齐？HTML/CSS布局求助

嘿，我看了你写的代码，明白你想把侧边栏放到页面右侧，和左边的图文区域并排，而且要在文本上方一点的位置对吧？咱们来一步步解决这个问题～

问题根源 #

你现在的.imageText和.sidebar都是默认的块级元素，所以它们会各自占据一整行空间，自然就会上下排列。你尝试的inline-block之所以没生效，是因为两个元素的总宽度大概率超过了父容器的宽度，导致侧边栏被挤到了下一行；而position:absolute没起作用，是因为你没给它设置具体的定位坐标（比如right、top值），它还是会停留在默认的位置。

推荐解决方案：用Flexbox布局（现代布局首选） #

Flexbox是最直观的实现这种左右并排布局的方式，步骤很简单：

1. 给.imageText和.sidebar套一个父容器，比如叫.content-container
2. 给这个父容器设置Flex属性，让内部元素左右排列，顶部对齐
3. 调整.imageText的宽度，给侧边栏留出足够的空间

修改后的完整代码：

h2 { display: inline-block; }
.nav:hover { background-color: red; font-size: 150%; color: white; }
.myWebsite { border-bottom: 2px solid red; padding-bottom: 10px; }
.nav { border: 2px solid red; padding: 10px; margin-left: 130px; }

/* 新增的容器样式 */
.content-container {
  display: flex;
  justify-content: space-between; /* 让左右元素分开，中间留空 */
  align-items: flex-start; /* 让两个元素顶部对齐 */
  padding-top: 100px;
  margin: 0 5%;
}

.imageText {
  width: 65%; /* 给侧边栏留出空间 */
}
img { width: 350px; height: 150px; float: left; padding: 20px; }
p { line-height: 1.5em; font-size: 18px; }
.sidebar { border: 1px solid yellow; background-color: gray; height: 280px; width: 300px; }
/* .footer{ border: 2px solid yellow; margin: 20px; } */

<div class="myWebsite">
 <h2>My Website </h2>
 <a class="nav" href="#home">Home</a>
 <a class="nav" href="#about">About</a>
 <a class="nav" href="#contact">Contact</a>
</div>
<!-- 新增的父容器 -->
<div class="content-container">
  <div class="imageText">
   <img src="https://www.surfertoday.com/images/stories/surferbarrel.jpg">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
  </div>
  <div class="sidebar">
   <a href="#">Some Useful Articles</a>
  </div>
</div>
<!-- <footer class="footer">
 <p>Join our mailing List</p>
 <input type="text" name="email" placeholder="Enter Your Email" />
 <input type="submit" value="Sign Me Up!" />
</footer> -->
</body>
</html>

备选方案：用Float布局（兼容旧浏览器） #

如果你需要兼容更老的浏览器，也可以用Float来实现：

/* 修改这部分样式 */
.imageText {
  padding-top: 100px;
  margin-left: 5%;
  float: left;
  width: 65%;
}
.sidebar {
  border: 1px solid yellow;
  background-color: gray;
  height: 280px;
  width: 300px;
  float: right;
  margin-right: 5%;
  margin-top: 100px;
}
/* 记得在容器最后加清除浮动的元素，避免影响后续布局 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后给.content-container加上clearfix类，或者直接在imageText和sidebar后面加一个<div class="clearfix"></div>。

这样修改后，你的侧边栏就能乖乖待在页面右侧，和左边的图文区域顶部对齐啦～

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