너비와 높이가 작동하지 않는 너비

안녕하세요 .content 클래스의 너비와 높이를 변경하려고합니다. 하지만 언급하지 않더라도 100px 너비와 100 % 높이를 제공합니다. 나는 float를 제거하려고했지만 stil이 작동하지 않습니다. 이유가 무엇입니까?너비와 높이가 작동하지 않는 너비

<!DOCTYPE html> 
<html> 
<head> 
    <style> 

     body{margin:0} 
     #navbar{ 
       width:100%; 
       background-color:black; 
       height:50px; 
       padding: 0 150px 0 150px; 
       position:relitive; 
     } 
     #logo{height:60px; 
      width:90px; 
      } 
     #container{ 
       background-color:#E6E6E6; 
       width:78%; 
       margin: auto; 
       height:1000px; 
       text-align:center; 
     } 
     #navTable{ 
        color:white; 
        position:absolute; 
        top:10px; 
        left:300px; 
        font-size:1.5em; 
       } 
     #navTable td{padding:0 10px 0 10px; 
        border-right:1px solid white; 
        } 
     #container div{width:32%; 
         height:100%; 
         border:1px solid black; 
         float:left; 
         }   
     .content{       /*this is not working[enter 
       background-color:yellow; 
      } 
    </style> 

</head> 
<body> 
     <div id='navbar'> 
      <img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/> 
      <table id='navTable'> 
       <tr> <td>Home</td> <td>News</td> <td>Money</td> <td>Entertainment</td> <td>Travel</td> </tr> 
      </table> 

     </div> 

     <div id='container'> 

      <div id='leftDiv'> 
       <div class='content'>hhhh</div>  <!--this--> 
      </div> 

      <div id='middleDiv'></div> 
      <div id='rightDiv'></div> 
     </div>  
</body> 
</html>

출력 : 여기에는 100px wide div와 비슷합니다.

출처

2017-09-13 judy

그 이유는 당신이 #container의 DIV에 대한 스타일을 가지고 있고 그것은 결과에 영향을 미치는 것. CSS 우선 순위는 .container 클래스의 정의를 무시하는 이유입니다. – RLaaa

그것이 div 내부 div 포함, 내부의 모든 div 요소를 의미한다. 직접 어린이에게만 적용하려는 경우 #container > div을 사용해야합니다.

height:100%을 정의하지 않았지만 실제로는 그렇다고 말했습니다. 문제는 귀하의 #container div 선택자가 #container div div.content 요소에도 적용된다는 것입니다.

당신은 !important를 사용하거나 더 구체적으로 귀하의 CSS 선택기에서 할 수

#container > div { ... } 
#container > div > .content { ... }

출처

2017-09-13 20:00:54

마찬가지로 @RLaaa는 "이유는 사용자가 #container div의 스타일을 갖고있어 결과에 영향을 미치기 때문입니다."

.content { 
    background-color: yellow; 
    width: 500px !important; 
    height: 200px !important; 
}

당신은로 변경할 수 있습니다 : 당신은 당신이 이미 쓴 모든 스타일을 유지하려면

, 당신은 단지 (임의 값) 예를 들어, .content 같은 속성에 대한 귀하의 경우 !important를 사용할 필요가 원하는 모든 값. 여기에 코드 조각입니다 : 당신이 선택 #container div를 사용하는 경우

 body{margin:0} 
 
     #navbar{ 
 
       width:100%; 
 
       background-color:black; 
 
       height:50px; 
 
       padding: 0 150px 0 150px; 
 
       position:relitive; 
 
     } 
 
     #logo{height:60px; 
 
      width:90px; 
 
      } 
 
     #container{ 
 
       background-color:#E6E6E6; 
 
       width:78%; 
 
       margin: auto; 
 
       height:1000px; 
 
       text-align:center; 
 
     } 
 
     #navTable{ 
 
        color:white; 
 
        position:absolute; 
 
        top:10px; 
 
        left:300px; 
 
        font-size:1.5em; 
 
       } 
 
     #navTable td{padding:0 10px 0 10px; 
 
        border-right:1px solid white; 
 
        } 
 
     #container div{width:32%; 
 
         height:100%; 
 
         border:1px solid black; 
 
         float:left; 
 
         }   
 
     .content { 
 
       background-color:yellow; 
 
       width: 500px !important; 
 
       height: 200px !important; 
 
      }

 <div id='navbar'> 
 
      <img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/> 
 
      <table id='navTable'> 
 
       <tr> <td>Home</td> <td>News</td> <td>Money</td> <td>Entertainment</td> <td>Travel</td> </tr> 
 
      </table> 
 

 
     </div> 
 

 
     <div id='container'> 
 

 
      <div id='leftDiv'> 
 
       <div class='content'>hhhh</div>  <!--this--> 
 
      </div> 
 

 
      <div id='middleDiv'></div> 
 
      <div id='rightDiv'></div> 
 
     </div>

출처

2017-09-13 19:49:30

너비와 높이가 작동하지 않는 너비

답변

관련 문제