如何实现博客页面中多栏目并排布局？

核心思路 #

用CSS的Flexbox或Grid布局，将四个栏目（Tags、Let's Talk、Hot Topics、Latest News）放入统一容器，实现横向并排，同时适配不同屏幕尺寸。

1. 调整HTML结构 #

把原来放在页脚上方的Tags、Let's Talk代码，移动到与Hot Topics、Latest News同级的容器内，结构如下：

<!-- 统一包裹四个栏目的容器 -->
<div class="blog-sidebar-container">
  <!-- Hot Topics 栏目 -->
  <div class="sidebar-box">
    <h3>Hot Topics</h3>
    <!-- 这里放你的Hot Topics内容 -->
  </div>

  <!-- Latest News 栏目 -->
  <div class="sidebar-box">
    <h3>Latest News</h3>
    <!-- 这里放你的Latest News内容 -->
  </div>

  <!-- Tags 栏目 -->
  <div class="sidebar-box">
    <h3>Tags</h3>
    <!-- 这里放你的Tags内容（比如标签云） -->
  </div>

  <!-- Let's Talk 栏目 -->
  <div class="sidebar-box">
    <h3>Let's Talk</h3>
    <!-- 这里放你的Let's Talk内容（比如留言表单/联系方式） -->
  </div>
</div>

2. 添加CSS样式 #

两种布局方案任选其一：

方案一：Flexbox布局（兼容性好）

.blog-sidebar-container {
  display: flex;
  flex-wrap: wrap; /* 屏幕变窄时自动换行 */
  gap: 20px; /* 栏目之间的间距，可按需调整 */
  padding: 20px 0;
}

.sidebar-box {
  flex: 1; /* 每个栏目平分容器宽度 */
  min-width: 250px; /* 最小宽度，防止栏目过窄 */
  border: 1px solid #eee; /* 盒子边框，匹配参考图样式 */
  border-radius: 8px; /* 圆角效果 */
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 轻微阴影提升质感 */
}

方案二：Grid布局（更简洁）

.blog-sidebar-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自动适配列数 */
  gap: 20px;
  padding: 20px 0;
}

.sidebar-box {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

新手注意事项 #

• 移除原来固定Tags、Let's Talk在页脚上方的CSS代码（比如margin-top: xxx、position: relative这类样式），避免冲突。
• 如果你的栏目已有自定义类名，直接替换.sidebar-box即可，不用新增类。
• 调整gap、min-width、边框颜色/阴影等数值，完全匹配你的参考效果图。

内容的提问来源于stack exchange，提问作者Buse Nur Çetin