종횡비 div 다른 종횡비 내 div 의도하지 않음

Question

내 코드에 문제가 있습니까? 종횡비를 padding-bottom으로 유지하는 대신 내부 div (두 개)가 외부 div를 채우는 이유는 무엇입니까? 당신이 당신의 one:before 플로트를 취소하지 않기 때문에

.one { 
 
    position: relative; 
 
    background: #990000; 
 
    background-size: contain; 
 
} 
 

 
.one:before { 
 
    content: ""; 
 
    width: 1px; 
 
    margin-left: -1px; 
 
    float: left; 
 
    height: 0; 
 
    padding-bottom: 40%; 
 
} 
 

 
.one:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.two { 
 
    position: relative; 
 
    top: 0; 
 
    background: #009900; 
 
} 
 

 
.two:before { 
 
    content: ""; 
 
    width: 1px; 
 
    margin-left: -1px; 
 
    float: left; 
 
    height: 0; 
 
    padding-bottom: 20%; 
 
} 
 

 
.two:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="one"> 
 
    <div class="two"></div> 
 
</div>

https://jsfiddle.net/mhk99j8z/

Answer 1

그것은이다 - one:after이 오면 당신이 후 - :after가 요소의 끝에 추가 (다른 모든 요소 후)

.one { 
 
    position: relative; 
 
    background: #990000; 
 
    background-size: contain; 
 
} 
 

 
.one:before { 
 
    content: ""; 
 
    width: 1px; 
 
    margin-left: -1px; 
 
    float: left; 
 
    height: 0; 
 
    padding-bottom: 40%; 
 
} 
 
    
 
.two { 
 
    clear:left;    /* remove one:after and clear on two */ 
 
    position: relative; 
 
    top: 0; 
 
    background: #009900; 
 
} 
 

 
.two:before { 
 
    content: ""; 
 
    width: 1px; 
 
    margin-left: -1px; 
 
    float: left; 
 
    height: 0; 
 
    padding-bottom: 20%; 
 
} 
 

 
.two:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="one"> 
 
    <div class="two"></div> 
 
</div>