如何在每个盒子上获得标题？

Question

我尝试对所有 div 进行不同的着色以便于查看。我想为每个添加一个标题，最好在每个框的左下角。如果可能的话，那就太好了。此外，这些 div 响应移动视图，因此能够让文本变通也很有用。提前致谢。

.wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.wrapper > div {
  background-color: lightcoral;
  padding: 3em;
  color: white;
    
}.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

.one {
  grid-column: 1;
  grid-row: 1;
  background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
  background-position: 610px 500px;
}
.two { 
  grid-column: 2;
  grid-row: 1 /3;
  background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}
.three {
  grid-column: 1;
  grid-row: 2 /3;
  background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}
.four {
  grid-column: 3;
  grid-row: 1 / 4;
  background-image: url('http://www.ledr.com/colours/grey.jpg');
}
.five {
  grid-column: 1 /3;
  grid-row: 3;
  background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
}
.six {
  grid-column: 1 / 4;
  grid-row: 4 ;
  background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}
.seven {
  grid-column: 1;
  background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}

.eight {
  grid-column: 1;
  grid-row: 8 / 5;
  background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}

.nine {
  grid-column: 2;
  grid-row: 7/5;
  background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
}

.ten {
  grid-column: 3;
  background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}
.eleven {
  grid-column: 3;
  grid-row: 7/6;
  background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}
.twelve {
  grid-column: 2/4;
  grid-row: 7;
  background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}
.thirteen {
  grid-column: 1/4;
  grid-row: 8 ;
  background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}
/*HOVER*/
.one:hover {
    opacity: .6;
}
.two:hover {
    opacity: .6;
}
.three:hover {
    opacity: .6;
}
.four:hover {
    opacity: .6;
}
.five:hover {
    opacity: .6;
}
.six:hover {
    opacity: .6;
}
.eight:hover {
    opacity: .6;
}
.nine:hover {
    opacity: .6;
}
.ten:hover {
    opacity: .6;
}
.eleven:hover {
    opacity: .6;
}
.twelve:hover {
    opacity: .6;
}
.thirteen:hover {
    opacity: .6;
}

@media only screen and (max-width: 768px) {
 .wrapper {
   display: block;
 }
 .margin-bot {
   margin-bottom: 2px;
 }

}

<div class="wrapper">
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="one margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="two margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="three margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="three margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="four margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="five margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="six margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="eight margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="nine margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="ten margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="eleven margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="twelve margin-bot"></div>
    
    <div onclick="location.href='landing.html';" style="cursor: pointer;" class="thirteen margin-bot"></div>
      </div>

Answer 1

使用 flexbox 将是一个自然的选择，因为您在这里使用 CSS3 Grid。将你的网格项目设为flexbox并将每个网格项目上的文本对齐到左下角（也许调整你的padding 也是？）使用：

display: flex;
align-items: flex-end; /* align to the bottom */
justify-content: flex-start; /* align to the left */

参见下面的演示：

.wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.wrapper>div {
  background-color: lightcoral;
  padding: 3em;
  color: white;
  
  /* ADDED THESE*/
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

.one {
  grid-column: 1;
  grid-row: 1;
  background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
  background-position: 610px 500px;
}

.two {
  grid-column: 2;
  grid-row: 1 /3;
  background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}

.three {
  grid-column: 1;
  grid-row: 2 /3;
  background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}

.four {
  grid-column: 3;
  grid-row: 1 / 4;
  background-image: url('http://www.ledr.com/colours/grey.jpg');
}

.five {
  grid-column: 1 /3;
  grid-row: 3;
  background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
}

.six {
  grid-column: 1 / 4;
  grid-row: 4;
  background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}

.seven {
  grid-column: 1;
  background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}

.eight {
  grid-column: 1;
  grid-row: 8 / 5;
  background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}

.nine {
  grid-column: 2;
  grid-row: 7/5;
  background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
}

.ten {
  grid-column: 3;
  background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}

.eleven {
  grid-column: 3;
  grid-row: 7/6;
  background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}

.twelve {
  grid-column: 2/4;
  grid-row: 7;
  background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}

.thirteen {
  grid-column: 1/4;
  grid-row: 8;
  background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}


/*HOVER*/

.one:hover {
  opacity: .6;
}

.two:hover {
  opacity: .6;
}

.three:hover {
  opacity: .6;
}

.four:hover {
  opacity: .6;
}

.five:hover {
  opacity: .6;
}

.six:hover {
  opacity: .6;
}

.eight:hover {
  opacity: .6;
}

.nine:hover {
  opacity: .6;
}

.ten:hover {
  opacity: .6;
}

.eleven:hover {
  opacity: .6;
}

.twelve:hover {
  opacity: .6;
}

.thirteen:hover {
  opacity: .6;
}

@media only screen and (max-width: 768px) {
  .wrapper {
    display: block;
  }
  .margin-bot {
    margin-bottom: 2px;
  }
}

<div class="wrapper">

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="one margin-bot">one</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="two margin-bot">two</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="three margin-bot">three</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="three margin-bot">four</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="four margin-bot">five</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="five margin-bot">six</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="six margin-bot">seven</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="eight margin-bot">eight</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="nine margin-bot">nine</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="ten margin-bot">ten</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="eleven margin-bot">eleven</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="twelve margin-bot">twelve</div>

  <div onclick="location.href='landing.html';" style="cursor: pointer;" class="thirteen margin-bot">thirteen</div>
</div>

Answer 2

您可以在每个 div 中创建一个 <span> 元素并添加以下 CSS。我已经用 class one.

实现了第一个 div

所做的更改：

已将 position:relative 添加到 div 和 class one。
对于 div 下的跨度，添加了以下内容：

.one span { position: absolute; bottom: 0; left: 0; }

.wrapper {
 max-width: 900px;
 margin: 0 auto;
}

.wrapper>div {
 background-color: lightcoral;
 padding: 3em;
 color: white;
}

.wrapper {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 15px;
 grid-auto-rows: minmax(100px, auto);
}

.one {
 grid-column: 1;
 grid-row: 1;
 background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
 background-position: 610px 500px;
 position: relative;
}

.one span {
 position: absolute;
 bottom: 0;
 left: 0;
}

.two {
 grid-column: 2;
 grid-row: 1 /3;
 background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}

.three {
 grid-column: 1;
 grid-row: 2 /3;
 background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}

.four {
 grid-column: 3;
 grid-row: 1 / 4;
 background-image: url('http://www.ledr.com/colours/grey.jpg');
}

.five {
 grid-column: 1 /3;
 grid-row: 3;
 background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
}

.six {
 grid-column: 1 / 4;
 grid-row: 4;
 background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}

.seven {
 grid-column: 1;
 background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}

.eight {
 grid-column: 1;
 grid-row: 8 / 5;
 background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}

.nine {
 grid-column: 2;
 grid-row: 7/5;
 background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
}

.ten {
 grid-column: 3;
 background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}

.eleven {
 grid-column: 3;
 grid-row: 7/6;
 background-image: url('http://www.solidbackgrounds.com/images/2560x1440/2560x1440-indigo-web-solid-color-background.jpg');
}

.twelve {
 grid-column: 2/4;
 grid-row: 7;
 background-image: url('http://www.extremetech.com/wp-content/uploads/2012/02/GreenBackground.png');
}

.thirteen {
 grid-column: 1/4;
 grid-row: 8;
 background-image: url('https://i.ytimg.com/vi/3qlRNWBWr5o/maxresdefault.jpg');
}
/*HOVER*/

.one:hover {
 opacity: .6;
}

.two:hover {
 opacity: .6;
}

.three:hover {
 opacity: .6;
}

.four:hover {
 opacity: .6;
}

.five:hover {
 opacity: .6;
}

.six:hover {
 opacity: .6;
}

.eight:hover {
 opacity: .6;
}

.nine:hover {
 opacity: .6;
}

.ten:hover {
 opacity: .6;
}

.eleven:hover {
 opacity: .6;
}

.twelve:hover {
 opacity: .6;
}

.thirteen:hover {
 opacity: .6;
}

@media only screen and (max-width: 768px) {
 .wrapper {
  display: block;
 }
 .margin-bot {
  margin-bottom: 2px;
 }
}

<div class="wrapper">

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="one margin-bot">
  <span>One</span>
 </div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="two margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="three margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="three margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="four margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="five margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="six margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="eight margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="nine margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="ten margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="eleven margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="twelve margin-bot"></div>

 <div onclick="location.href='landing.html';" style="cursor: pointer;" class="thirteen margin-bot"></div>
</div>

如何在每个盒子上获得标题？

How to get titles on each box?

html

css

css-grid