Flex布局下如何将第三个div置于前两个下方并添加标题水平线

核心问题分析 #

原代码中.container使用flex布局但默认是row方向，导致所有子元素（logo、header、hr、heading）都在同一行排列，无法实现垂直分层的效果；同时<hr>标签的位置和样式不够灵活，难以精准控制与标题的间距。

修改步骤与代码实现 #

1. 调整HTML结构

将logo与多行标题包裹在同一个容器内作为顶部行，目标标题单独放在下方，结构更清晰：

<div class="container">
  <!-- 顶部行：logo + 机构标题 -->
  <div class="header-row">
    <div class="logo">
      <img src="css/logo.png" height="125px" width="125px" id="logo_img" alt="机构logo">
    </div>
    <div class="header">
      <h3>DEPARTMENT OF FORENSIC MEDICINE <br> POST GRADUATE INSTITUTE OF MEDICAL EDUCATION AND <br> RESEARCH,CHANDIGARH</h3>
    </div>
  </div>

  <!-- 下方标题：带上下水平线 -->
  <div class="heading">
    <h3>Forensic Toxicology Laboratory</h3>
  </div>
</div>

2. 修改CSS样式

• 让.container垂直排列子元素
• 用flex布局实现顶部行的logo与标题横向对齐
• 通过CSS边框实现标题的上下水平线，替代<hr>标签以获得更好的控制：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 15px;
  font-family: 'Times New Roman', Times, serif;
}

.container {
  margin: 50px auto 0;
  border: 2px black solid;
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  padding: 1rem;
}

/* 顶部行：横向排列logo和标题 */
.header-row {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 1rem;
}

.header {
  flex-grow: 1; /* 占满剩余空间，让标题居中 */
  text-align: center;
  font-size: 15px;
}

/* 带上下水平线的标题 */
.heading {
  text-align: center;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 0.5rem 0; /* 控制文字与水平线的间距 */
}

.heading h3 {
  margin: 0;
}

效果说明 #

• 顶部的logo与机构标题横向排列，垂直居中对齐
• "Forensic Toxicology Laboratory"标题位于顶部区域下方，上下带有均匀的水平线
• 整体布局适配打印需求，结构清晰且样式可控

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