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

Question

我试图使h2元素的文本超过同级元素(image(的宽度。

.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>

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

Answer 1

您需要向单个容器类添加一些css。

.single-container {
width:270px
}

将宽度更改为您想要的宽度：(

编辑：代码笔链接-https://codepen.io/canadianeagle/pen/YjwwYg

Answer 2

.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>

查看我在代码笔上的解决方案