如何实现博客文章页面水平排列？已尝试列布局但无效

嘿，我来帮你搞定这个布局问题！你当前的代码没法实现水平列展示，核心原因是外层容器.post-block没设置横向排列的布局规则，内部子元素默认都是块级元素，自然会垂直堆叠。下面给你两种简单有效的实现方案：

方案一：使用Flexbox（推荐，兼容性好） #

Flexbox是实现横向布局最常用的方式，只需要给.post-block添加几个Flex属性，再微调内部元素样式就能搞定：

修改后的完整代码 #

<div class="post-block">
  <div v-for="(post,index) in posts" :key="post.slug + '_' + index" class="post-item">
    <router-link :to="'/blog/' + post.slug">
      <article class="media">
        <figure>
          <div class="posts">
            <img v-if="post.featured_image" :src="post.featured_image" alt="" style="max-width:100%;">
            <img v-else src="http://via.placeholder.com/250x250" alt="">
            <h2>{{ post.title }}</h2>
            <p>{{ post.summary }}</p>
          </div>
        </figure>
      </article>
    </router-link>
  </div>
</div>

.post-block {
  background-color: #f8f8f8;
  color: #151515;
  position: relative;
  /* 核心Flex布局属性 */
  display: flex;
  gap: 20px; /* 控制文章卡片之间的间距 */
  flex-wrap: wrap; /* 小屏幕自动换行，保证响应式 */
  padding: 20px; /* 给容器加内边距，避免内容贴边 */
}

.post-item {
  flex: 1 1 300px; /* 自适应宽度，最小300px避免太窄 */
  max-width: 300px; /* 限制最大宽度，保持卡片规整 */
}

.posts {
  text-align: center; /* 让卡片内容居中 */
}

p, h2 {
  color:#D3D3D3;
  margin: 10px 0; /* 调整标题和段落的间距 */
}

.posts img {
  border-radius: 8px; /* 可选：给图片加圆角提升美观度 */
}

关键说明： #

• display: flex 把.post-block转为Flex容器，内部子元素自动横向排列
• gap 直接设置子元素间距，比用margin更简洁不易出错
• flex-wrap: wrap 确保在手机等小屏幕上自动换行，不会挤成一团
• flex: 1 1 300px 让每个卡片在可用空间里均匀分配宽度，同时保留最小宽度限制

方案二：使用CSS Grid（适合规整网格布局） #

如果你想要更严格的多列网格效果，比如固定列数或更精准的行列控制，CSS Grid是更好的选择：

修改后的核心CSS代码 #

.post-block {
  background-color: #f8f8f8;
  color: #151515;
  position: relative;
  /* 核心Grid布局属性 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充列，每列最小300px */
  gap: 20px; /* 控制行列之间的间距 */
  padding: 20px;
}

.post-item {
  /* Grid会自动处理排列，无需额外属性 */
}

/* 其余样式和方案一一致 */
.posts {
  text-align: center;
}

p, h2 {
  color:#D3D3D3;
  margin: 10px 0;
}

.posts img {
  border-radius: 8px;
  max-width: 100%;
}

关键说明： #

• grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 会根据容器宽度自动创建列，每列最小300px，超出空间均匀分配
• Grid布局天生适合多列网格场景，后续如果需要调整列数、行列对齐方式，会比Flexbox更灵活

为什么你之前的代码没生效？ #

你之前的代码里，.post-block没有设置任何布局规则，内部的<div>、<article>、<figure>都是默认的块级元素，所以会自动垂直堆叠。只要给外层容器加上Flex或Grid的布局属性，就能轻松实现横向列布局啦！

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