宽度和高度不工作的宽度

嗨，我只是想改变.content类的宽度和高度。但是即使我没有提到它，它给了我100px的宽度和100％的高度。我已经尝试删除浮动，但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宽div在这里。

来源

2017-09-13 judy

的原因是，你有风格的#container DIV和它的影响的结果。 CSS优先级是为什么在.container类中定义它将被忽略 – RLaaa

当您使用选择#container div这意味着内的每个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的样式，它影响结果”。

如果你想保持你已经写的所有样式，你只需要在你的情况下使用!important为.content这样的特性，例如（随机值）：

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

你可以改变这你喜欢的任何值。下面是摘录：

 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

宽度和高度不工作的宽度

回答

相关问题