html의 컨테이너가 배경색을 표시하지 않는 이유는 무엇입니까?

class = container로 div의 배경색을 변경하려고하지만 작동하지 않습니다. 아래 코드가 있습니다. 배경색과 위치 요소가 어떻게 연관되어 있는지 이해할 수 없습니다.html의 컨테이너가 배경색을 표시하지 않는 이유는 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
background-color:hotpink; 
    margin: 0; 
    padding: 0; 
} 

.container { 
background-color:green; 
    position: relative; 
    width: 100%; 
} 

.right { 
    position: absolute; 
    right: 0px; 
    width: 300px; 
    background-color: #b0e0e6; 
} 
</style> 
</head> 
<body> 

<div class="container"> 
    <div class="right"> 
    <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p> 
    </div> 
</div> 

</body> 
</html>

출처

2016-06-16 Talib Shaikh

잘 보인다? https://plnkr.co/edit/QPEs6Uwbw8Lyxq5WkwWy?p=preview –

@SatejS OP는 컨테이너 calss의 BG에서 녹색을 사용하고 있습니다 ... 코드를 확인하십시오 ... –

문제는 콘텐츠에서 바깥 쪽 div는 높이가 0으로 축소됩니다. 그래서 거기에 있습니다. 단지 보지 못합니다. –

확인 Fiddle Here ...

나는 .container & .right에 대한 position 속성을 제거하고 아래 코드를 확인, .right 클래스 float:right을 사용했다.

CSS

body { 
    background-color:hotpink; 
    margin: 0; 
    padding: 0; 
} 

.container { 
    background-color:green; 
    width: 100%; 
} 

.right { 
    float:right; 
    width: 300px; 
    background-color: #b0e0e6; 
} 

.clearfix{ 
    clear:both; 
}

HTML

<div class="container"> 
    <div class="right"> 
    <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p> 
    </div> 
    <div class="clearfix"></div> 
</div>

출처

2016-06-16 07:03:12

html의 컨테이너가 배경색을 표시하지 않는 이유는 무엇입니까?

답변

관련 문제