Question

我正在练习html / css。我的问题是正确的div没有出现。如果它还显示它与另一个div重叠。

请看一下这段代码。我使用括号编辑器。告诉我代码中有什么问题。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body{
	
	 background: #5C258D;
  background: linear-gradient(to left, #5C258D , #4389A2); 
	width: 100%;
}
.nav{
	height: 50px;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #999;
	position: fixed;
	top:0px;
	
}

.left{
	width:964px;
    height: 100%;
	margin-top: 50px;
	align-items: center;
	float: left;

	
	
}

.images{
	width:871.5px;
	
	height:262.5px;
	margin-left: 50px;
    margin-right: auto;

	
}
.pro{
	margin-top:50px;
	
    border-left:3px solid white; 
	
	
}
.cov{
	float: right;
	
	margin-top: -87.5px;
	margin-left: 90.5px;
	border: 2px solid white;
	

}
.con{
	width:783px;
	margin-left: 139px;

	
}

#tab1{
	height: 70px;
	width: 783px;
	background: #fff;
   border-bottom: 1px solid #999;
	
}
#tab2{
	height: 70px;
	width: 783px;
	background: #fff;
   border-bottom: 1px solid #999;
}
#tab3{
	height: 500px;
	width: 783px;
	
	background: #fff;
   border-bottom: 1px solid #999;
	
}
.right{
	width:390px;
	height: 100%;
    margin-top:-600px;
	margin-right: 10px;
	float: right;
	background: #000;
	
	
}
.all{
	width:100%;
	height: 100%;
	clear:both
}

<html>
<head>
	<link rel="stylesheet" type="text/css" href="index.css">
	<title></title>
</head>
<body>
	<div class="nav">
	
	</div>
	<div class="all">
	   <div class="left">
		   
		<div class="images">
		   <div class="pro">
			<img src="11864.jpg" alt="Smiley face" height="175" width="185"  >
			</div>
		   <div class="cov">
			<img src="default_cover_5_ff9ff46d48dc181084c9c23a120b68d8.jpg" height="175" width="779">
			
			</div>
			
			</div>
		   <div class="con">
		     <div id="tab1">
			   
			  </div>
			  <div id="tab2">
			   
			   </div>
			   <div id="tab3">
			         
			   </div>
		   
		   </div>
		 
			
		   
		
		</div>
	   <div class="right">
		 <div class="trends">
		   </div>
		</div>
	
	</div>

</body>
</html>

Answer 1

将此添加到您的CSS

html, body { height: 100%; }

你的.right div的高度为0，因为它的100％高度没有任何相关内容。上述规则改变了这一点。

我的div没有显示？

1 个答案: