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

时间：2017-09-30 17:16:59

标签： html css css3 css-grid

我尝试对所有div进行不同的着色以便于查看。我想为每个标题添加标题，最好在每个方框的左下角。如果可能的话，这将是伟大的。此外，这些div响应移动视图，因此能够使文本解决也是有用的。提前谢谢。

＆＃13;
＆＃13; 
.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;
 }

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

你可以使用CSS和：像这样的元素之后（我只为第一个做了）：

＆＃13;
＆＃13; 
.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 {
  position:relative;
  grid-column: 1;
  grid-row: 1;
  background-image: url('https://www.cdc.gov/nchs/images/hp2000/hdspr/hdslide11.gif');
  background-position: 610px 500px;
}
.one:after {
  content:"title One";
  position:absolute;
  bottom:10px;
  left:10px;
  font-size:18px;
}
.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;
 }

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用flexbox是一个很自然的选择，因为您在这里使用grouped_df['column_1'].unique() 。让你网格项 grouped_df['column_1'].apply(list).apply(set) 并将每个网格项上的文字对齐到左下角（也可以调整你的CSS3 Grid？）使用： 

flexbox

见下面的演示：

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

答案 2 :(得分：1)

您可以在每个div中创建一个<span>元素并添加以下CSS。我已经使用类one实现了第一个div。

所做的更改：

  1. 将position:relative添加到了课程one的div。
  2. 对于div下的范围，添加了以下内容：

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

    ＆＃13;
    ＆＃13; 
    .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;
	}
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题