겹치는 div 두 개를 부모의 바닥에 맞 춥니 다.

Question

부모의 바닥에 두 개의 div를 정렬하는 데 어려움을 겪고 있습니다.

• 흰색 (class="section")은 부모 div이며 100 % 너비입니다.
• 그레이 (class="text")는 너비가 100 %이며 내용물에 따라 임의의 높이가있을 수 있으며 흰색과 주황색보다 작은 높이를 가질 수 있습니다. 바닥은 흰색 바닥과 정렬되어야합니다.
• 주황색 (class="icon")은 너비와 높이가 고정되어 있으며 밑바닥이 흰색 아래쪽에 정렬되어야하며 오른쪽에서 약간 어긋나게 배치해야합니다. 오렌지보다 낮습니다.

나는 vertical-align: bottom, position: absolute 및 float의하지만 아무 소용이 서로 다른 조합을 시도했다.

JSFiddle : https://jsfiddle.net/ca9we2jo/ 나는 그것을 같이하고 싶은

:

Answer 1

당신은 다음과 같이 그것을 달성하기 위해 CSS를 flex를 사용할 수 있습니다

body { 
 
    background-color: #333333; 
 
    margin: 0; 
 
} 
 
.container { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
} 
 
.section { 
 
    background-color: #FFFFFF; 
 
    min-height: 200px; 
 
    margin-bottom: 100px; 
 
    flex-direction: column-reverse; 
 
    position: relative; 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.text { 
 
    background-color: #999999; 
 
    padding-right: 270px; 
 
    height: 150px; 
 
} 
 
.tall { 
 
    height: 300px; 
 
} 
 
.icon { 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: #FF9933; 
 
    border: #000000 2px dashed; 
 
    z-index: 1; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="container"> 
 
    <div class="section"> 
 
    <div class="text"> 
 
     <b>Case 1:</b> 
 
     Gray has lower height than orange 
 
    </div> 
 
    <div class="icon"> 
 
    </div> 
 
    </div> 
 
    <div class="section"> 
 
    <div class="text tall"> 
 
     <b>Case 2:</b> 
 
     Gray has bigger height than orange 
 
    </div> 
 
    <div class="icon"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

div .icon의 위치를 ​​설정할 때 상위 div의 위치를 ​​선언해야합니다. 요소의 위치 값을 설정할 때 위치가 선언 된 바로 옆에있는 상위 div를 기준으로 위치를 계산합니다. .section에 위치 세트가없는 경우 .icon은 .container에 상대적인 위치를 계산합니다 (컨테이너에 위치 세트가있는 경우).

<div class="container"> 
    <div class="section"> 
    <div class="text"> 
     <b>Case 1:</b> 
     Gray has lower height than orange 
    </div> 
    <div class="icon"> 
    </div> 
    </div> 
    <div class="section"> 
    <div class="text tall"> 
     <b>Case 2:</b> 
     Gray has bigger height than orange 
    </div> 
    <div class="icon"> 
    </div> 
    </div> 
</div> 



body { 
    background-color: #333333; 
    margin: 0; 
} 
.container { 
    margin: 0 auto; 
    width: 80%; 
} 
.section { 
    position:relative; 
    background-color: #FFFFFF; 
    min-height: 200px; 
    margin-bottom: 200px; 
    width: 100%; 
} 
.text { 
    background-color: #999999; 
    height: 100px; 
    width: 100%; 
    text-align: right; 
    position:absolute; 
    left:0; 
    bottom:0; 
} 
.tall { 
    height: 300px; 
} 
.icon { 
    width: 250px; 
    height: 250px; 
    background-color: #FF9933; 
    border: #000000 2px dashed; 
    z-index: 1; 
    position: absolute; 
    right:0; 
    bottom:0; 
}