如何实现医疗网站CSS信息盒子的等高垂直对齐？

问题背景 #

我正在给一家医疗诊所的网站调CSS，想让三个信息盒子保持一样高。现在前两个盒子显示正常，但最后一个总跟另外两个对不齐（截图里能看到前两个底部平齐，最后一个往上飘）。试了好几种方法都没搞定，贴出相关的HTML和CSS代码：

原CSS代码 #

.box1 {
  color: #314370;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
}

.box2 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

.box3 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

原HTML代码 #

<center>
  <div class="box1" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box2"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box1"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>---@-----.---</b></p>
    <p style="color:##223a66;"><b> Call: ---</p>
</b></p>
    <!--<p style="color:grey;">
          Make Enquiries=<br>-->



  </div>
  </div>
</center>

问题分析 #

1. 布局对齐问题：用inline-block的元素默认是基线对齐，内容少的盒子会往上偏，哪怕设置了固定高度也没用；
2. HTML标签错误：最后一个盒子里的<b>标签没闭合，还有多余的</div>，浏览器渲染时会出错；
3. CSS冗余：三个盒子样式完全一样，没必要分三个类写，纯属给自己加工作量；
4. 颜色值错误：原HTML里的color:##223a66多写了一个#，导致颜色不生效。

解决方法 #

方法一：修复inline-block对齐（兼容旧浏览器） #

给所有盒子加vertical-align: top让它们顶部对齐，同时合并CSS类、修复HTML标签：

修改后的CSS

.info-box {
  color: #314370;
  border-radius: 25px; /* 简写四个圆角，代码更简洁 */
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  vertical-align: top; /* 核心：让盒子顶部对齐 */
  margin: 0 10px; /* 可选：加间距避免盒子挤在一起 */
}

修改后的HTML

<center>
  <div class="info-box" id="info">
    <img src="images/clock.png" width="100px"><br>
    <b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="info-box">
    <img src="images/s3.png" width="100px"><br>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="info-box">
    <img src="images/mail.png" width="100px"><br>
    <b>Contact Us:</b><br>
    <p style="color:#223a66"><b>---@-----.---</b></p>
    <p style="color:#223a66"><b> Call: ---</b></p>
  </div>
</center>

方法二：用Flexbox布局（更现代省心） #

如果不用兼容老掉牙的浏览器，直接用Flexbox，天然支持等高布局，还不用固定高度：

修改后的CSS

.box-container {
  display: flex;
  justify-content: center; /* 水平居中盒子 */
  gap: 20px; /* 盒子之间的间距 */
}

.info-box {
  color: #314370;
  border-radius: 25px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  padding: 15px; /* 可选：加内边距，内容不贴边更美观 */
}

修改后的HTML

<div class="box-container">
  <div class="info-box" id="info">
    <img src="images/clock.png" width="100px"><br>
    <b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="info-box">
    <img src="images/s3.png" width="100px"><br>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="info-box">
    <img src="images/mail.png" width="100px"><br>
    <b>Contact Us:</b><br>
    <p style="color:#223a66"><b>---@-----.---</b></p>
    <p style="color:#223a66"><b> Call: ---</b></p>
  </div>
</div>

额外提醒 #

<center>标签已经过时，用Flexbox的justify-content: center或者CSS的text-align: center替代更规范。

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