如何使同class的div统一为最大元素的尺寸？

问题描述 #

现有如下HTML结构：

<div class="personal-events-list">
    <div class="specific-event black-font">Something</div>
    <div class="specific-event black-font">Something else</div>
    <div class="specific-event black-font">Something more</div>
</div>

当前给.specific-event设置width: fit-content后，每个元素宽度不一致。需求是让所有.specific-event统一为其中最宽元素的尺寸，同时避免固定宽度影响显示效果。当前CSS代码：

.specific-event {
  width: fit-content;
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

解决方案 #

方法一：CSS Grid（推荐）

给父容器添加Grid布局，让列宽自动适配最宽子元素的宽度，所有子元素会自动对齐这个宽度：

.personal-events-list {
  display: grid;
  grid-template-columns: max-content;
  gap: 10px; /* 替代子元素的margin-bottom，布局更整洁 */
}

.specific-event {
  /* 移除原有的width: fit-content和margin-bottom */
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

原理：grid-template-columns: max-content会将列宽设置为该列内最宽元素的内容宽度，所有子元素都会继承这个宽度。

方法二：Flexbox

通过父容器的自适应宽度配合子元素的100%宽度实现统一尺寸：

.personal-events-list {
  display: flex;
  flex-direction: column;
  width: fit-content;
  gap: 10px; /* 替代子元素的margin-bottom */
}

.specific-event {
  width: 100%; /* 占满父容器宽度，父容器宽度由最宽子元素决定 */
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

原理：父容器的width: fit-content会根据内部最宽的子元素确定自身宽度，子元素设置width: 100%后，就会和父容器宽度保持一致。

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