宽度和高度不工作的宽度
问题描述:
嗨,我只是想改变.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在这里。
答
当您使用选择#container div
这意味着内的每个div
元素,包括div
内div
。如果你的意思是只适用于指导孩子,你应该使用#container > div
。
注意你说你没有定义height:100%
,但实际上你是这样做的!您的问题是您的#container div
选择器也适用于#container div div.content
元素。
您可以使用!important
或更具体的在你的CSS选择器:
#container > div { ... }
#container > div > .content { ... }
答
正如@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>
的原因是,你有风格的#container DIV和它的影响的结果。 CSS优先级是为什么在.container类中定义它将被忽略 – RLaaa