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的解释：

flex布局的定义方面是制作flex的能力   项目“ flex”，更改其宽度/高度以填充可用空间   在主要方面。这是通过flex属性完成的。伸缩   容器为其项目分配可用空间（与它们的大小成比例   弯曲增长因子）以填充容器或缩小容器（成比例   到其弹性收缩系数）以防止溢出。

如果flex-grow和flex-shrink都处于完全弯曲状态   值为零，否则为灵活值。

Answer 2

如果要保证宽度，请在min/max-width: 170px;中添加.heading

.container {
  display: flex;
}

.heading {
  display: inline-block;
  max-width: 170px;
  min-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>

如何使divs的宽度相同？

2 个答案: