0
플렉스 레이아웃에있는 이미지의 오른쪽 하단에 일부 텍스트를 배치하려고합니다. 그것은 작동하지 않는 것 같습니다. 나는 매우 신축적이고 많은 실수를하고 있습니다. 나는 왼쪽 열과 오른쪽 열을 가지고 있는데, 두 열 모두 2 개의 이미지의 6 행을 연결합니다. 가운데에는 몇 가지 설명문이 있습니다. 각 이미지의 오른쪽 하단에 1에서 12까지의 숫자를 겹쳐서 표시하고 싶습니다.flex 항목의 이미지 위에 텍스트를 배치 할 수 없습니다.
HTML :
<div class="flexbox-container">
<div class="flexbox-2col-container">
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" />
<div class="number">1</div>
</div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
</div>
<div class="flexbox-1widecol-container">
<div class="middle"><h3>12 people to meet in 2018</h3></div>
</div>
<div class="flexbox-2col-container">
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
<div class="column50perc"><img src="img/20171118ng_Akasha L Van-Cartier5 1.JPG" /></div>
</div>
</div>
CSS :
.flexbox-container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:stretch;
align-items: flex-start;
justify-content: space-between;
}
.flexbox-2col-container {
flex: 2;
display:flex;
flex-wrap:wrap;
flex-direction:row;
align-items:stretch;
justify-content: space-between;
}
.flexbox-1widecol-container {
flex: 1;
padding: 10px;
}
h3 {
font-family: Roboto, sans-serif;
font-weight: 600;
}
.column50perc {
width: 50%;
padding: 10px 5px 0 5px;
justify-content: space-between;
}
img {
cursor: pointer;
position: relative;
display:block;
}
img:hover {
}
.middle {
}
.middle h3 {
background-color: #404040;
color: white;
}
.number {
position: absolute;
display: inline-block;
bottom: 0;
right: 0;
background-color: black;
color: white;
z-index: 2;
width: 50px;
height: 50px;
}
제가 잘못 뭘하는지 알려 주시기 바랍니다.