如何修改CSS代码实现大屏幕下侧边栏显示在主内容左侧相邻位置

问题根因 #

你的布局错误是由HTML结构不合理导致的：

• 承载左侧主内容的.row容器仅包裹了.leftcolumn，而侧边栏对应的.rightcolumn放在了.row容器之外，二者不在同一个布局行上下文内，浮动属性无法让两个元素并列显示，最终侧边栏只能渲染在整个主内容块的下方、页脚上方。
• 额外小问题：CSS中navbar的注释语法错误（注释闭合符写反），虽不影响布局但建议修正。

修复步骤 #

1. 调整HTML结构：将整个<aside>标签移动到<main>标签内部的.row容器中，与.leftcolumn保持同级关系
2. 可选优化：可以把.rightcolumn的宽度从20%调整为25%，和左侧75%刚好占满整行，避免多余间隙

修改后的代码示例 #

HTML修改部分 #

<!-- 调整后的main部分结构 -->
<main>
  <div class="row">
    <div class="leftcolumn">
      <!-- 原有文章内容保持不变 -->
      <article class="post">
        <h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer </h2>
        <h5>Dec 7, 2017</h5>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      </article>
      <article class="post">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Sep 2, 2017</h5>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      </article>
    </div>
    <!-- 把aside移动到这里，和.leftcolumn同级，放在.row内部 -->
    <aside>
      <div class="rightcolumn">
        <section class="post">
          <h2>About Me</h2>
          <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        </section>
        <section class="post">
          <h3>Upcoming Posts</h3>
        </section>
      </div>
    </aside>
  </div>
</main>
<!-- 页脚保持在main外不变 -->
<footer class="footer">
  <h2>Footer</h2>
</footer>

CSS可选修改部分 #

/* 把右侧栏宽度调整为25%，和左侧75%刚好占满100%宽度 */
.rightcolumn {
  float: right;
  width: 25%;
  padding-left: 20px; /* 可以加个内边距拉开左右栏间距 */
}

/* 修正nav的注释错误 */
/* navbar */
/* top navigation bar style */
nav {
  background-color: #000;
  overflow: hidden;
}

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