html - 如何使堆叠的div宽度相同？

Question

我正在尝试创建一个主页，目前它看起来像这样:

.container {
  display: flex;
}

.heading {
  display: inline-block;
  width: 170px;
  vertical-align: top;
  text-align: left;
  padding-right: 20px;
}

.desc {
  display: inline-block;
  padding-left: 20px;
  padding-top: 10px;
  border-left: solid 2px black;
}

.tabPage {
  position: absolute;
  max-width: calc(100vw - 30px);
  height: 88vh;
  z-index: -1;
}

<div id="about" class="tabPage">
  <div id="general" class="container">
    <div class="heading">
      <h1>
        ABOUT US
      </h1>
    </div>
    <div class="desc">
      <p>
        The Allen Table Tennis Club is brought to you by the efforts of five passionate individuals. We aspire to create a club that provides an engaging environment, promotes a competitive spirit, and presents a charitable opportunity. We hold monthly tournaments
        that give the top 16 players a chance to make a donation to a charity of their choice. Whether you choose to have fun and relax or compete to transform lives around the world, we welcome you into our club.
      </p>
    </div>
  </div><br>
  <div id="meetings" class="container">
    <div class="heading">
      <h1>
        MEETINGS
      </h1>
    </div>
    <div class="desc">
      <p>
        Thursdays Every Week
      </p>
    </div>
  </div><br>
</div>

我无法对齐边界。我假设这是因为宽度计算不正确？

Answer 1

只需添加:flex-shrink: 0; 到您的 .heading CSS。

这是一个工作片段:

.container {
  display: flex;
}

.heading {
  display: inline-block;
  width: 170px;
  vertical-align: top;
  text-align: left;
  padding-right: 20px;
  flex-shrink: 0;
}

.desc {
  display: inline-block;
  padding-left: 20px;
  padding-top: 10px;
  border-left: solid 2px black;
}

.tabPage {
  position: absolute;
  max-width: calc(100vw - 30px);
  height: 88vh;
  z-index: -1;
}

<div id="about" class="tabPage">
  <div id="general" class="container">
    <div class="heading">
      <h1>
        ABOUT US
      </h1>
    </div>
    <div class="desc">
      <p>
        The Allen Table Tennis Club is brought to you by the efforts of five passionate individuals. We aspire to create a club that provides an engaging environment, promotes a competitive spirit, and presents a charitable opportunity. We hold monthly tournaments
        that give the top 16 players a chance to make a donation to a charity of their choice. Whether you choose to have fun and relax or compete to transform lives around the world, we welcome you into our club.
      </p>
    </div>
  </div><br>
  <div id="meetings" class="container">
    <div class="heading">
      <h1>
        MEETINGS
      </h1>
    </div>
    <div class="desc">
      <p>
        Thursdays Every Week
      </p>
    </div>
  </div><br>
</div>

这是解释，来自 W3C's documentation :

The defining aspect of flex layout is the ability to make the flex items “flex”, altering their width/height to fill the available space in the main dimension. This is done with the flex property. A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container, or shrinks them (proportional to their flex shrink factor) to prevent overflow.

A flex item is fully inflexible if both its flex-grow and flex-shrink values are zero, and flexible otherwise.