我試圖在同一高度對齊一個醫療實踐網站的CSS信息框，前兩個框看起來很好，除了最后一個。 我希望這些框以相同的高度對齊。我已經嘗試了許多技術，但似乎沒有一個能讓盒子在同一高度對齊。

這是單獨的HTML代碼和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;
}

<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>

您可以通過添加以下內容來讓內聯顯示的元素按照您想要的方式排列

vertical-align: top

.box1,
.box2,
.box3 {
  vertical-align: top;
}

.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;
}

<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>

Flexbox將允許您將項目彼此對齊。然而，您將需要添加flex-wrap: wrap以允許& quot換行& quot在寬度小于900像素的屏幕上。否則元件會被壓扁。您可以使用gap屬性將元素彼此分開。Ove rall Flexbox在瀏覽器上有最好的支持，包括廢棄的IE。要根據需要放置元素，可以使用justify-content:center；：

.box {
  color: #314370;
  border-radius: 25px;
  min-height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
}

section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

<section>
  <div class="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="box"><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="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>
</section>