꼬리말을 내용 아래에 보관

Question

나는 두 개의 div가 절대 옆에 나란히 배치되어 있습니다. 하지만 바닥 글을 만들려고 할 때 두 div 앞에 표시됩니다. 내가 어떻게 그것들 아래에있을 수 있을까? 역동적이어야하므로 divs 중 하나를 더 크게 만들면 바닥 글이 아래에 머물러있게됩니다.

여기 나는 그것을 보여주기 위해 만든 빠른 피들입니다. https://jsfiddle.net/po7159rf/ 또는

`<div class="left"> 
    <p>left div</p> 
</div>` 

`<div class="right"> 
    <p>right div</p> 
</div>` 

`<footer>Footer</footer>` 

`.left { 
    position: absolute; 
    left: 10%; 
    background-color: red; 
}` 

`.right { 
    position: absolute; 
    left: 80%; 
    background-color: blue; 
}` 

`footer { 
    width: 100%; 
    background-color: green; 
    text-align: center; 
}` 

Answer 1

당신은 왼쪽과 오른쪽 DIV 년대하기 위해 부모 DIV을 추가하여이를 달성 할 수있다. 최소 높이 및 상대 위치 지정 속성을 부모 div에 설정합니다. 아래 수정 코드를 찾으십시오.

<style> 
.parent { 
    position: relative; 
    min-height: 70px; 
} 

.left { 
    position: absolute; 
    left: 10%; 
    background-color: red; 
} 

.right { 
    position: absolute; 
    left: 80%; 
    background-color: blue; 
} 

footer { 
    width: 100%; 
    background-color: green; 
    text-align: center; 
} 

<div class="parent"> 
<div class="left"> 
    <p> 
     left div 
    </p> 
</div> 

<div class="right"> 
    <p> 
     Right div 
    </p> 
</div> 
</div> 

<footer> 
Footer 
</footer>