技术需求：实现Div响应式布局，移动端堆叠社交媒体信息流

嗨，我来帮你搞定这个响应式布局的问题！既然你的WordPress主题只支持自定义HTML，那我们用Flexbox + CSS媒体查询就能轻松实现需求，既保证PC端水平排列，又能让移动端自动垂直堆叠。

第一步：调整HTML结构（给Div添加类名） #

先给信息流容器和每个信息流项加上类名，方便用CSS精准控制：

<div class="social-feeds-container">
  <div class="social-feed-item">第一个社交媒体信息流内容</div>
  <div class="social-feed-item">第二个社交媒体信息流内容</div>
  <div class="social-feed-item">第三个社交媒体信息流内容</div>
</div>

（如果你的Div已经有自定义类名，直接替换成你现有的即可）

第二步：基础CSS实现PC端水平排列 #

用Flexbox做水平布局，它比传统的float更灵活，适配响应式场景更省心：

/* PC端样式：三个信息流水平均分宽度 */
.social-feeds-container {
  display: flex;
  gap: 1.5rem; /* 可选：给信息流之间加间距，提升视觉舒适度 */
  flex-wrap: wrap; /* 关键属性：允许空间不足时自动换行 */
}

.social-feed-item {
  flex: 1; /* 让每个信息流平分容器宽度 */
  min-width: 280px; /* 可选：设置最小宽度，避免屏幕变窄时信息流过于拥挤 */
}

第三步：媒体查询实现移动端垂直堆叠 #

针对平板/移动设备的屏幕宽度，强制每个信息流占满容器宽度，自然就会垂直堆叠：

/* 当屏幕宽度小于768px时（适配平板及移动端），切换为垂直布局 */
@media (max-width: 768px) {
  .social-feed-item {
    flex-basis: 100%; /* 每个信息流占满容器宽度 */
  }
}

怎么把CSS加到WordPress里？ #

你可以直接在WordPress后台的「外观 → 自定义 → 额外CSS」里粘贴上面的CSS代码；如果你的自定义HTML允许，也可以在HTML代码的<head>部分添加<style>标签包裹这些CSS。

额外小提示 #

如果你之前是用float属性实现水平排列的，建议换成上面的Flexbox方案——float的响应式处理需要额外清除浮动，容易出现布局bug，Flexbox是当前更推荐的现代布局方式，代码简洁且稳定性更高。

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