수직으로 다른 블록의 하단 라인

Question

위에 블록을 중심이되는 HTML 내가 가진 :

이것은 내가 뭘하려 :

<div class="image">Image</div> 
<div class="legend"> 
    Legend<br/> 
    width variable height<br/> 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
</div> 
<div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 

이 내가 원하는 결과입니다

.image { 
    height:100px; 
    background-color:red; 
} 
.legend { 
    transform:translateY(-50%); 
    background-color:blue; 
    width:300px; 
    margin:0 auto 
} 
.following { 
    background-color:yellow; 
    margin-top:-45px; 
} 

이것은 내가 얻은 결과입니다.

문제는 다음과 같습니다. 전설과 다음 텍스트 사이에이 여백을 두지 않아도됩니다.

The whole attempt codepen is here

질문 : 모든 용액 JS 않고도 원하는 결과를 얻을?

는 (기록을 위해 : this is a solution with JS)

Answer 1

당신은 요소의 높이를 알고 계십니까? 정확하게 50 %가 필요합니까? 여기

는 고정 50 픽셀 음성 위쪽 여백과 예입니다

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.legend { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:-50px auto 0; 
 
} 
 
.following { 
 
    background-color:yellow; 
 
}

<div class="image">Image</div> 
 
<div class="legend"> 
 
    Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
</div> 
 
<div class="following">The following text should follow immediatly the legend, regardless of the height of the legend or the image</div>

하지만이 좋은 솔루션입니다 (정확하게 당신이 찾고있는 아마되지 않습니다) 또 다른 옵션 :)

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.legend { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:0 auto; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    position: absolute; 
 
    left: 50%; 
 
} 
 
.legend:after { 
 
    content: attr(following); 
 
    display: block; 
 
    width: 100vw; 
 
    clear: both; 
 
    position: absolute; 
 
    background-color:yellow; 
 
    height: auto; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
    
 
} 
 
.following { 
 
}

<div class="image">Image</div> 
 
<div class="legend" following="The following text should follow immediatly the legend, regardless of the height of the legend or the image"> 
 
    Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
</div>

Answer 2

당신은 간단한 위치로이 작업을 수행 범례 포장 및 사업부와 다음 텍스트 및 위치 할 수 있습니다 : 상대적 위치로 설정할 수 있습니다 다음 : 절대

확인이 조각

.image { 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 
.legend { 
 
    transform: translateY(-50%); 
 
    background-color: blue; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
} 
 
.following { 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    left: 0; 
 
}

<div class="image">Image</div> 
 
<div class="container"> 
 
    <div class="legend"> 
 
    Legend 
 
    <br/>width variable height 
 
    <br/>the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image 
 
    </div> 
 
    <div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 
 
</div>

인 flexbox 또 다른 솔루션

.image { 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.item{ 
 
    transform:translateY(-50%); 
 
} 
 
.center { 
 
    background-color:blue; 
 
    width:300px; 
 
    margin:0 auto; 
 

 
} 
 

 
.Aligner { 
 
    display: flex; 
 
    flex-direction:column; 
 
} 
 

 

 
.Aligner-item--top { 
 
    width:100%; 
 
    background:red; 
 
} 
 

 
.following { 
 

 
    width:100%; 
 
    background-color:yellow; 
 
    
 
}

<div class="Aligner"> 
 

 
    <div class=" Aligner-item Aligner-item--top image">Image</div> 
 
    <div class="item"> 
 
    <div class="Aligner-item center">Legend<br/> 
 
    width variable height<br/> 
 
    the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image</div> 
 
    <div class="Aligner-item Aligner-item--bottom following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div> 
 
    </div> 
 
</div>

,132 10

희망이