如何在具有多个文本元素的图像叠加层上“对齐项目结尾”,同时停留在块中

我正在尝试使用图像叠加文字(在ap上方的H3)创建图像,并将此文字显示在左下角,而不会破坏该块并内联(我目前在代码中看到的内容)知道我是什么缺少,为什么这两个文本块元素变为内联并在底部并排显示?

<div class="col-4 p-0">
   <img src="imgs/design.jpg" class="img-fluid">
   <div class="card-img-overlay d-flex align-items-end">
      <h4 class="card-title">What Next?</h4>
      <p class="card-text">Is this the end?</p>
   </div>
</div
gjshiwoxia 回答:如何在具有多个文本元素的图像叠加层上“对齐项目结尾”,同时停留在块中

//HTML

      <div class="card h-100">
           <img src="/photos/dummy-01.jpg" class="card-img" alt="" />                                 
           <div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
                <h5 class="card-title">MBA</h5>
                <div class="card-text">
                    <p>Executive</p>
                </div>
           </div>
        </div>

    //Styling 

        .card{
           width: 100%;
           border-radius: 0;
           border: 0;
           margin-bottom: 20px;
           overflow: hidden

           .card-img{    
               height: 100%;
               width: 100%;
               object-fit: cover;
               transition: all 0.4s linear;
           }

           .card-img-overlay {
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
               padding: 1.25rem;
           }
        }
本文链接:https://www.f2er.com/3170006.html

大家都在问