使用css flex设置3列卡

<div class="card-container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.card-container {
  display: flex; /* 将父容器设置为Flex容器 */
  justify-content: space-between; /* 子元素在主轴上均匀分布 */
}

.card {
  flex-basis: 30%; /* 子元素的初始宽度为30% */
  height: 200px; /* 设置卡片的高度 */
  background-color: #f2f2f2; /* 设置卡片的背景颜色 */
}

<div class="card-container">
  <div class="card">
    <h2>Card 1</h2>
    <p>This is the content of card 1.</p>
  </div>
  <div class="card">
    <h2>Card 2</h2>
    <p>This is the content of card 2.</p>
  </div>
  <div class="card">
    <h2>Card 3</h2>
    <p>This is the content of card 3.</p>
  </div>
</div>

.card {
  /* 其他样式 */
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}