当前外观在此处输入图像描述
我希望它看起来像什么在这里输入图像描述
当每一个我使用css网格，文本背景延伸到图像的大小，或者它将结束在图像下面，即使有很多空的空间在正确的大小。
我的HTML
<div class="Last-Part">
<div class="Image">
<img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg">
</div>
<div class="box4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim4
</div>
<div class="box5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo5
</div>
</div>
CSS
.Last-Part div{
text-align: center;
background: #ddd;
padding: 1em;
}
.Last-Part div:nth-child(odd){
background: #eee;
}
.Last-Part{
grid-column-gap: 1em;
top: 50%;
transition: translate(-50%, 50%);
display: grid;
}
.box4{
align-items: end;
width: 400px;
}
.box5{
width: 400px;
}
.Image{
width: 510px;
}
img{
width: 500px;
height: 500px;
}
<div class="Last-Part">
<div class="Image">
<img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg">
</div>
<div>
<div class="box4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim4
</div>
<div class="box5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo5
</div>
<div class="box4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo5
</div>
</div>
</div>
通过使用flex和fit-content，您可以轻松地实现您所描述的布局。
.Last-Part div {
text-align: center;
background: #ddd;
padding: 1em;
height: fit-content;
}
.Last-Part div:nth-child(odd) {
background: #eee;
}
.Last-Part {
display: flex;
grid-column-gap: 1em;
transition: translate(-50%, 50%);
}
.box4 {
align-items: end;
width: 400px;
}
.box5 {
width: 400px;
}
.Image {
width: 510px;
}
img {
width: 500px;
height: 500px;
}
