Question

我正在尝试使我的h2元素文本超过同级元素（图像）的宽度。

.container {
  display: flex;
}

img {
  height: 25%;
}

<div class="container">
  <div class="single-container">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
  <div class="single-container">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
  <div class="single-container">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
</div>

codepen链接 https://codepen.io/anon/pen/LBGGWB?editors=1100

Answer 1

您可以仅编辑父div的宽度：

.single-container {
  max-width: 250px;
}

Answer 2

您需要在单个容器类中添加一些CSS。

.single-container {
  width:270px
}

将宽度更改为任何您想要的：）

编辑：Codepen链接-https://codepen.io/canadianeagle/pen/YjwwYg

Answer 3

.container {
  display: flex;
}

img {
  width: 213px;
  height: 25%;
}

.single-container {
  width: 33.33%;
}

.innerDiv {
  width: 50%;
}

<div class="container">
  
  <div class="single-container">
    <div class="innerDiv">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
    </div>

  </div>
    <div class="single-container">
              <div class="innerDiv">
            <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
            <h2>I'm trying to not make this more than image <width class=""></width></h2>
          </div>
      </div>
  
    <div class="single-container">
            <div class="innerDiv">
          <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
          <h2>I'm trying to not make this more than image width.</h2>
        </div>
  </div>
</div>

Check out my solution on codepen

如何使h2元素不超过图像宽度

3 个答案: