2012-08-05 6 views
0

컨테이너 div와 2 개의 div가 있습니다. 컨테이너의 배경색을 흰색으로 설정하고 다른 두 div의 색상을 설정하지 않았습니다. 컨테이너의 색상 덕분에 흰색 배경을 기대했지만 모든 것이 투명합니다. 정상입니까? 컨테이너의 색상이 고려되지 않은 것 같습니다. TKS http://jsfiddle.net/Grek/svt2s/어떻게 내 배경이 투명합니까?

CSS

#team-container 
{ 
    width:960px; 
    background-color:#FFFFFF; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=83)"; 
    filter: alpha(opacity=83); 
    opacity: 0.83; /* For IE8 and earlier */ 
    margin-left: auto; 
    margin-right: auto; 
    background: #fff; 
} 

#team-left { 
color:#000; 
padding-left:20px; 
padding-top:20px; 
/* padding:15px;*/ 
width: 30%; 
float: left; 
position: relative; 
} 

#team-right { 
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight:400; 
padding-left:25px; 
padding-top:28px; 
color:#000; 
width: 60%; 
float: left; 
position: relative; 
text-align:justify; 
} 
+2

팁이 있습니다. (꼭 필요한 것은 아니지만 사람들이 귀하의 질문에 더 빨리 답변 할 수 있도록 도와줍니다.) http://jsfiddle.net의 각 장소에 HTML과 CSS를 붙여 넣으면 우리에게 라이브를 보여줄 수 있습니다 , 당신이 설명하고 있었던 것의 편집 가능한, 데모! HTML/CSS/Javascript 스 니펫 질문에 유용합니다. –

+0

잘 모르겠 으면 html을 여기에 붙여 넣으십시오. – devundef

+0

여기에 jsfiddle 링크가 있습니다. http://jsfiddle.net/Grek/svt2s/ – Greg

답변

0

부모 요소는 플로트 된 자식을 포함해야하며, 그렇지 않으면 부모가 레이아웃에서 공백을 차지하지 않습니다 (레이아웃 목적으로 높이가 0입니다). 이것이 부모님의 흰색 배경을 보지 못하는 이유입니다.

다음 두 가지 방법 중 하나로 떠 어린이 (모두 같은 일을 수행) 포함 할 수 있습니다

:

clearfix

.clearfix {...} /* Insert standard clearfix code here */ 
... 
<div id="team-container class="clearfix"> 
    <div id="team-left"></div> 
    <div id="team-right"></div> 
</div> 

명확한 사업부

.clear {clear:both;} 
... 
<div id="team-container"> 
    <div id="team-left"></div> 
    <div id="team-right"></div> 
    <div class="clear"></div> 
</div> 

Modified demo과를 명확한 div 및 밝은 회색 배경.

Modified demo clearfix와 밝은 회색 배경.

+0

자세한 설명에 많은 감사드립니다! 매우 감사! – Greg

1

배경 색상과 불투명도 상속 속성이 없습니다. 특정 요소/선택기에 대해 정의하지 않으면 설정되지 않습니다.

관련 문제