如何用纯HTML&CSS实现3个并排且各含标题、文本、跳转按钮的蓝色盒子

现有代码问题 #

• 标签嵌套不规范：<p> 标签仅允许嵌套行内元素，内部放置 <div> 块级元素会被浏览器自动拆分，导致样式、布局全部错乱
• 无横向布局规则：未给三个卡片容器设置并排排列的布局属性
• 样式冗余：子元素重复声明和父容器完全一致的背景色、文字颜色属性，没有复用父级样式
• 缺少按钮交互元素的实现逻辑

完整可运行实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>卡片布局实现</title>
<style>
/* 卡片容器，实现横向并排 */
.card-wrapper {
  display: flex;
  gap: 20px; /* 卡片之间的间距 */
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
/* 单个卡片样式 */
.card {
  flex: 1; /* 三个卡片宽度均分 */
  background-color: #0096FF;
  color: #fff;
  padding: 24px;
  border-radius: 8px; /* 不需要圆角可以删掉该行 */
  box-sizing: border-box;
}
/* 卡片标题 */
.card-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}
/* 卡片说明文本 */
.card-desc {
  text-align: left;
  line-height: 1.5;
  margin-bottom: 24px;
}
/* 按钮样式 */
.card-btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 20px;
  background-color: #fff;
  color: #0096FF;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
}
.card-btn:hover {
  opacity: 0.9;
}
</style>
</head>
<body>
<div class="card-wrapper">
  <!-- 第一个卡片 -->
  <div class="card">
    <div class="card-title">Registration</div>
    <div class="card-desc">Find out what do you want to renew, replace on your vehicle</div>
    <a href="#" class="card-btn">点击跳转</a>
  </div>
  <!-- 第二个卡片 -->
  <div class="card">
    <div class="card-title">Second Title</div>
    <div class="card-desc">第二个卡片的说明文本，可根据需求自行修改内容</div>
    <a href="#" class="card-btn">点击跳转</a>
  </div>
  <!-- 第三个卡片 -->
  <div class="card">
    <div class="card-title">Third Title</div>
    <div class="card-desc">第三个卡片的说明文本，可根据需求自行修改内容</div>
    <a href="#" class="card-btn">点击跳转</a>
  </div>
</div>
</body>
</html>

代码说明 #

• 使用 flex 布局实现三个卡片横向均分排列，通过gap属性控制卡片间距
• 所有公共样式统一写在父级容器上，子元素自动继承无需重复声明
• 按钮使用<a>标签实现跳转功能，样式可根据设计需求调整大小、颜色、圆角等属性
• 所有标签嵌套符合HTML规范，不会出现浏览器自动拆分标签的异常问题

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