Question

我是初学程序员，我正在使用CSS3练习网站布局，但我的一个div没有出现。

div ＃right-rectangle 没有出现，我不确定为什么因为有宽度，高度和背景颜色。我已经检查了验证器上的代码，但它没有显示有关div的任何信息。

    #rectangle-1 {
    	width: 31%;
    	height: 20vh;
    	background-color: #D0021B;
    	float: left;
    	margin: 2vh;
    }
    
    #rectangle-2 {
    	width: 31%;
    	height: 20vh;
    	background-color: #4A90E2;
    	float: left;
    	margin: 2vh;
    	
    }
    
    #rectangle-3 {
    	width: 31%;
    	height: 20vh;
    	background-color: #4A4A4A;
    	float: left;
    	margin: 2vh;
    
    }
    
    .paragraph {
    	margin-left: 2vh;
    	margin-right: 2vh;
    	float: left;
    }
    
    p { 
        word-spacing: 5px;
        font-size: 20px;
    }
    
    #left-rectangle {
    	height: 30vh;
    	width: 33%;
    	float: left;
    	background-color: #D0021B;
    	margin: 2vh;
    }
    
    #right-rectangele {
    	height: 30vh;
    	width: 60%;
    	background-color: #4A90E2;
    	float: left;
    	margin: 2vh;
    }
    
    #bottom-left-rectangle {
    	height: 20vh;
    	width: 65%;
    	background-color: #4A90E2;
    	float: left;
    	clear: both;
    	margin: 1vh 0vh 0vh 2vh;
    }
    
    #bottom-right-rectangle {
    	height: 20vh;
    	width: 32%;
    	background-color: #D0021B;
    	float: left;
    	margin: 1vh 2vh 0vh 0vh;
    }
    
    #rect-inside-rect {
    	height: 20vh;
    	width: 75%;
    	background-color: #4A4A4A;
    	margin: 0vh 0vh 0vh 7.5vh;
    }

<head>
    
    		<title>HTML Layout 1-b</title>
    
    		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
    
    		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    		<meta name ="viewport" content="width=device-width, initial-scale=1.0">
    		
    
    	</head>
    
    	<body>
    
    		<div id = "container">
    			<div id = "top">
    				<div id = "rectangle-1"></div>
    				<div id = "rectangle-2"></div>
    				<div id = "rectangle-3"></div>
    			</div>
    
    			<div class = "paragraph" id = "paragraph-1">
    				<p> Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium. Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. </p>
    			</div>
    			
    			<div class = "paragraph">
    				<p> Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium. Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat.  </p>
    			</div>
    
    			<div id = "left-rectangle"></div>
    			<div id = "right-rectangle"></div>
    
    			<div id = "bottom-left-rectangle"></div>
    			<div id = "bottom-right-rectangle">
    				<div id = "rect-inside-rect"></div>
    			</div>
    
    
    		</div>
    	</body>

Answer 1

这是一个错字：替换＆＃34;＃right-rectangele＆＃34;使用＆＃34;＃right-rectangle＆＃34; ： - ）

Answer 2

你的css规则中有拼写错误：

#right-rectangele

而不是

#right-rectangle

Div没有出现在网页上

2 个答案: