如何让段落位于H5下方而非侧边？前端布局问题咨询

你的问题出在<article>元素的flex布局设置上——当前article使用默认的flex-direction: row（横向排列），再加上align-items: center，导致<h5>和<p>并排显示。要实现段落在标题正下方的效果，需要让每个article内部元素垂直排列，同时保持三个article在桌面端水平分布。

修改方案 #

调整article的flex方向为垂直，并优化桌面端布局：

.ui-design {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 3%;
}

.ui-design h2, .ui-design h5 {
  color: black;
}

.article-container {
  display: flex;
  flex-direction: column; 
  gap: 15px; /* 可选：增加移动端垂直间距 */
}

article {
  display: flex;
  flex-direction: column; /* 改为垂直堆叠内部元素 */
  align-items: flex-start; /* 让标题和段落左对齐 */
  margin-top: 10px;
}

@media (min-width: 768px) {
  .article-container {
    flex-direction: row; 
    gap: 30px; /* 可选：增加桌面端水平间距 */
  }
  article {
    flex: 1; /* 可选：让三个article平分容器宽度 */
  }
}

修改效果 #

• 移动端：每个article内的标题和段落垂直排列，段落位于标题正下方
• 桌面端：三个article水平分布，每个内部的标题和段落依然保持垂直堆叠的结构

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