Question

我的子元素（标题容器）的宽度小于其父元素（容器）的宽度。我希望子元素具有相同的宽度，但是由于某种原因，它默认为较短。

我尝试将title-container的宽度设置为100％和auto，但是都没有扩展内容以适应其父容器的整个宽度。

* {
  padding: 0;
  margin: 0;
  box-sixing: border-box;
}

.container {
  margin: 0 45px;
  width: 46%;
}

.image-container {
  width: 100%;
  background-color: #faeeeb;
  padding: 60px;
}

.title-container {
  padding: 0 30px;
  width: 100%;
}

<article class="container">

  <a href="#">
    <div class="image-container has-border">
      <div class="aspect-ratio-container">
        <div class="image"></div>
      </div>
      <div class="label-container">
      </div>
    </div>
  </a>
  <div class="title-container">
    <h1 class="title"><a href="#">The Issue With How We Talk About Self-Care</a></h1>
    <h2 class="subtitle">How a mindful practice became a commodified wellness trend.</h2>
    <a href="#">
      <h5 class="cta-label">Read More</h5>
    </a>
  </div>

</article>

我希望扩展标题容器的宽度以适合其父容器的宽度。

Answer 1

因此，在查看您的代码后，我注意到您已将.container设置为46％，这将使其成为其父级宽度的46％。该.title-container实际上是正确的。它的宽度也是46％。

容器中的图像显示在容器外部（没有溢出：隐藏），因此看起来好像.container大于实际大小。

我在下面做了一些调整，应该为您提供预期的（视觉上）相等的.container和.title-container。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}

.image-container {
  width: 100%;
  background-color: #faeeeb;
  padding: 60px;
}

.title-container {
  padding: 0 30px;
  width: 100%;
}

<article class="container">

  <a href="#">
    <div class="image-container has-border">
      <div class="aspect-ratio-container">
        <div class="image"></div>
      </div>
      <div class="label-container">
      </div>
    </div>
  </a>
  <div class="title-container">
    <h1 class="title"><a href="#">The Issue With How We Talk About Self-Care</a></h1>
    <h2 class="subtitle">How a mindful practice became a commodified wellness trend.</h2>
    <a href="#">
      <h5 class="cta-label">Read More</h5>
    </a>
  </div>

</article>

文本框的宽度默认小于父容器的宽度

1 个答案: