Question

嗨，我只是想改变.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这里。

Answer 1

正如@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>

Answer 2

当您使用选择器#container div时，它意味着内部的每个div元素，包括div内的div。如果您的意思是仅将其应用于直接儿童，则应使用#container > div。

注意你说你没有定义height:100%，但实际上你做了！您的问题是，#container div选择器也适用于#container div div.content元素。

您可以在CSS选择器中使用!important或更具体：

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

宽度和高度不起作用

2 个答案: