html - 将 html block 的宽度限制为兄弟的宽度

Question

我正在制作我的作品集，我正在尝试添加一些个人简介。我希望一切都与我的名字保持一致。我已经成功地制作了一个简短的标语行，但是当我添加一个包含大量文本的 block 时，所有内容都与该 block 或父 block 对齐。

如何限制父级的宽度(到标题的宽度

我整理了一个 Codepen来证明我的意思。

我最好不用 JS 来做

片段(在小窗口中看起来不太好):

header {
  display: inline-block;
  width: 100%;
  margin: 16px 0;
  color: #333;
  text-align: center;
}

header .header-contents {
  margin: auto;
  max-width: 920px;
}

header .header-contents .title {
  display: inline-block;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 96px;
}

header .header-contents .tagline {
  display: block;
  text-align: right;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 36px;
}

header a {
  color: black;
  text-decoration: none;
}

header a:hover {
  text-decoration: none;
}

.bio-text {
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 2em;
  font-weight: 300;
  margin: 16px auto;
}

<header>
  <div class="header-contents">
    <div class="title">
      <a href="./">First Lastname</a>
      <div class="tagline">
        Tagline goes here
      </div>
      <!--    putting .bio-text here moves the tagline to the right margin    -->
    </div>
    <div class="bio-text" id="about">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
    </div>
  </div>
</header>

Answer 1

尝试使用flex:

HTML:

header {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 16px 0;
  color: #333;
  text-align: center;
}

header .header-space {
  flex: 1;
}

header .header-contents {
  flex: 0;
  margin: auto;
  max-width: 960px;
}

header .header-contents .myname {
  white-space: nowrap;
}

header .header-contents .title {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 96px;
}

header .header-contents .tagline {
  display: block;
  text-align: right;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 36px;
}

header a {
  color: black;
  text-decoration: none;
}

header a:hover {
  text-decoration: none;
}

header .bio-text {
  width: inherit;
  text-align: center;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 2em;
  font-weight: 300;
  margin: 16px auto;
}

<header>
  <div class="header-space"></div>
  <div class="header-contents">
    <div class="title">
      <div class="myname">
        <a href="./">First Lastname</a>
      </div>
      <div class="tagline">Tagline goes here</div>
      <div class="bio-text" id="about">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
      </div>
    </div>
  </div>
  <div class="header-space"></div>
</header>