html CSS |弹性方块|正文

5rgfhyps  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(148)

我正在做一个作业,我必须制作一个播放列表,但问题是句子太长,这会导致播放列表封面之间的间隔太长或奇怪,我希望句子能够在彼此之下中断,但它就是不想工作
你能帮我吗,先谢谢了!
My workResult i need to have显示器

////////////////CSS////////////////////////
/*flexbox parent*/
.playlists{

display: flex;
flex-wrap: wrap;
gap: 20px;


}

/*flexbox children // calbum overs*/
.covers{

width: 200px;
padding: 15px;

}

//////////////// HTML//////////////////////////////
<!--Main Pagina // Player-->  
<h1 class="titel"> Popular playlists right now</h1>

<section class= "playlists">

  <div class="cover">

    <img src="./Cove images/british-soul-invasion.jpg" alt="British soul invasion" style="height: 10rem;width:10rem">
    <h4>British soul invasion</h4>
    <p>Flo, Craig David, Lil Silva, Charlotte Day Wilson</p>

  </div>

  <div class="cover">
    <img src="./Cove images/chill-pop.jpg" alt=""style="height: 10rem;width:10rem">
    <h4>Chill pop</h4>
    <p>Hailee Steinfeld, Craig David, Galantis, Doja cat</p>
  </div>

相关问题