如何使用 CSS 将无序列表与不同的 div 对齐？

Question

问题在于，当屏幕尺寸减小且三个无序列表对齐时（一个用于工作经验，一个用于教育）。教育部分与工作经验不一致，因为文本较长，而且我使用 justify-content: space-around。我不想使用 space- Between 因为它在中间创建了太多空间，并且 flex: 1 需要很长时间才能对齐。我该如何解决这个问题？

.info {
  display: flex;
  color: #FFFFFF;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 40px;
  gap: 12px;
}

.personal {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-indent: 12px;
  gap: 6px;
}

.info ul {
  display: flex;
  list-style-type: none;
}

.info ul li {
  font-weight: 400;
}

.experience {
  color: #282726;
  background-color: #D6CAB0;
}

.personal-experience {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-around;
  gap: 24px;
}

<section class="experience">
  <h1>Experience & Education</h1>
  <div class="personal-experience">
    <div class="work-experience">
      <div class="info">
        <h2>SOFTWARE ENGINEER</h2>
        <ul class="personal">
          <li>MABUHAY INCORPORATED</li>
          <li>(NOVEMBER 2020 - APRIL 2024)</li>
        </ul>
      </div>
      <div class="info">
        <h2>FRONT END DEVELOPER</h2>
        <ul class="personal">
          <li>NARRA INCORPORATED</li>
          <li>(DECEMBER 2019 - NOVEMBER 2020)</li>
        </ul>
      </div>
    </div>
    <div class="education">
      <div class="info">
        <h2>BACHELOR DEGREE - BSCS</h2>
        <ul class="personal">
          <li>YEAR 2015 - 2019</li>
          <li>SCHOOL: UNIVERSIDAD DE SAN JUAN</li>
          <li>ADDRESS: CANLAUN LAGAYAN CITY FINLAND</li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 1

您可以尝试 flex-grow 并在工作和教育容器上设置最大宽度...

.info {
  display: flex;
  color: #FFFFFF;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 40px;
  gap: 12px;
}

.personal {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /*
  text-indent: 12px;
  */
  gap: 6px;
}

.info ul {
  display: flex;
  list-style-type: none;
}

.info ul li {
  font-weight: 400;
}

.experience {
  color: #282726;
  background-color: #D6CAB0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.personal-experience {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-around;
  gap: 24px;
  border: 1px solid black;
  padding: 0.2rem;
}

.work-experience, .education {
  border: 1px solid black;
  flex-grow: 1;
  max-width: 500px;
}

<section class="experience">
  <h1>Experience & Education</h1>
  <div class="personal-experience">
    <div class="work-experience">
      <div class="info">
        <h2>SOFTWARE ENGINEER</h2>
        <ul class="personal">
          <li>MABUHAY INCORPORATED</li>
          <li>(NOVEMBER 2020 - APRIL 2024)</li>
        </ul>
      </div>
      <div class="info">
        <h2>FRONT END DEVELOPER</h2>
        <ul class="personal">
          <li>NARRA INCORPORATED</li>
          <li>(DECEMBER 2019 - NOVEMBER 2020)</li>
        </ul>
      </div>
    </div>
    <div class="education">
      <div class="info">
        <h2>BACHELOR DEGREE - BSCS</h2>
        <ul class="personal">
          <li>YEAR 2015 - 2019</li>
          <li>SCHOOL: UNIVERSIDAD DE SAN JUAN</li>
          <li>ADDRESS: CANLAUN LAGAYAN CITY FINLAND</li>
        </ul>
      </div>
    </div>
  </div>
</section>