Question

我无法获得divs＆＃39; 2nd_a＆＃39; ＆＃39; 2nd_b＆＃39;和＆＃39; 2nd_c＆＃39; （在＆＃39; second_area＆＃39; div内）正确调整大小。我真的不明白这一点，因为他们应该是160px高和160px宽的盒子，他们只是没有调整大小。此外，如果我把div中的文本带走，它们就会消失。我尝试将它们显示为内联块，但无济于事。任何人都可以帮助解释为什么会发生这种情况吗？

＆＃13;

@charset "utf-8";
/* CSS Document */
body{
	background-color:#fff;	
	padding:0px;
	margin:0 auto;
}

#header-wrap{
	width:100%;
	height:100px;
	margin: 0 auto;
	background:#BABABA;
	border-bottom: 1px solid #211c20;
	border-top: 1px solid #211c20;
}

#header{
    width:960px;
    height:auto;
    margin: 0 auto;
    padding-top:15px;
}

.logo{
    width:130px;
    height:50px;
    border:1px solid black;
    padding-top:20px;
    padding-left:50px;
    font-size:24px;
    float:left;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

.links{
    float:left;
    height:50px;
    width:778px;
    font-size:24px;
	padding-top:20px;
	text-align:right;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#main_body{
	background:#2A00FF;
	width:960px;
	height:auto;
	margin:0 auto;
}
#first_area{
	width:960px;
	height:auto;
	margin:0 auto;
	background:#E000FF;
	padding-top:150px;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:33px;
	text-align:center;
	padding-bottom:150px;
}
#second_area{
	width:960px;
	height:auto;
	background:#22FF00;
}
#2nd_a{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#983C3D;
}
#2nd_b{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#FFCE00;
}
#2nd_c{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#C11FFF;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href ="style.css" rel="stylesheet" type="text/css"/>
<title>Untitled Document</title>
</head>

<body>



<div id="header-wrap">

<div id="header">
<div class="logo">LOGO</div>
<div class="links">VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT</div>
</div>
</div>

<div id="main_body">

<div id="first_area">excellent vending services</div>
<div id="second_area">

<div id="2nd_a">a</div>
<div id="2nd_b">b</div>
<div id="2nd_c">c</div>

</div>

</div>
      

</body>
</html>

＆＃13;

Answer 1

Here is fiddle. remove "2" from id name. Like

#nd_a

Answer 2

问题在于以数字开头的ID。虽然您可以使用数字在HTML5中启动ID，但CSS中仍有一些需要考虑的因素。您需要在CSS文件中转义这样的id选择器：

#\32nd_a {
styles go here
}

有关详细信息，请参阅此处：can i have a div with id as number?

为什么这些div正确调整大小？

2 个答案: