Question

我是HTML / CSS的新手。我想建立一个网站，但我偶然发现了一个问题。

我的内容div＆＃34;在行div的顶部有一个空白区域，我似乎无法弄清楚导致问题的原因。有人可以帮忙吗？我会很感激它。

谢谢！

＆＃13;

<head>

<meta charset="utf-8">

<title>Vlad Olar</title>

    <style type="text/css">
		
		body {
			padding:0;
			margin:0;
			font-family:Lato, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
			background-color:#D8DCE1;
		}
		
		.clear {
			clear:both;	
		}
		
		.fixedwidth {
			width:960px;
			margin:0 auto;
			padding:0 0;
		}
		
		#topbar {
			background-color:#4C7585;
			height: 40px;
			width: 100%;
		}
		
		#front {
			height: 360px;
			width: 100%;
			background-color:#D8DCE1;	
		}
		
		#line {
			height:10px;
			width:100%;
			background-color:#4C4C4C;
		}
		
		#foto {
			height:120px;
			width:120px;
			background-color:#4C4C4C;
			border-radius:60px;
			z-index:3;
			float:left;
			position:relative;
			top:-55px;
			margin-left:103px;
		}
		
		#gaming {
			height:120px;
			width:120px;
			background-color:#4C4C4C;
			border-radius:60px;
			z-index:3;
			float:right;
			position:relative;
			top:-55px;
			margin-right:103px;
		}
		
		#design {
			height:120px;
			width:120px;
			background-color:#4C4C4C;
			border-radius:60px;
			z-index:3;
			float:left;
			position:relative;
			top:-55px;
			margin-left:198px;
		}
		
		#content {
			margin:0;
			padding:0;	
		}
		
		#fotocontent {
			background-color:#A48251;
			height:500px;
			width:320px;
			float:left;
		}
		
		#designcontent {
			background-color:#D1A366;
			height:500px;
			width:320px;
			float:left;
		}
		
		#gamingcontent {
			background-color:#A48251;
			height:500px;
			width:320px;
			float:left;
		}
	
		#footer {
			background-color:#4C7585;
			height: 40px;
			width: 100%;
		}
		
		#container {
			margin:0;
			padding:0;	
		}

	</style>

</head>

＆＃13;

<body>

	<div id="container">
    
    	<div id="topbar">
        	
            <div class="fixedwidth">
            
            </div>
        
        </div>
        
        <div id="front">
        
        </div>
        
        <div id="line">
        
        	<div class="fixedwidth">
            	
                <div id="foto">
                
                </div>
                
                <div id="design">
                
                </div>
                
                <div id="gaming">
                
                </div>
                
            </div>
        
        </div>
        
        <div class="clear">
        
        </div>
        
        <div id="content">
        	
            <div class="fixedwidth">
            	
                <div id="fotocontent">
               
                </div>
                
                <div id="designcontent">
               
                </div>
                
                <div id="gamingcontent">
               
                </div>
                
            </div>
            
        </div>
        
        <div class="clear">
        
        </div>
        
        <div id="footer">
        	
            <div class="fixedwidth">
            
            </div>
            
        </div>
    
    </div>

</body>

＆＃13;

Answer 1

正如@HiddenHobbes写道，由于 #foto ， #design 而 #gaming 正在拉下 .clear div（删除顶部：-55px; ，你会看到它。）

如果您不想重新计算边距，可以使用 position：absolute; 将这些块包装在某个包装中，以防止下一个div的下拉行为。

在你的HTML中

<div id="line">
    <div class="fixedwidth">
        <div class="foowrapper">            
            <div id="foto"></div>            
            <div id="design"></div>            
            <div id="gaming"></div>
        </div>        
    </div>
</div>

在你的CSS中

.foowrapper {
    position: absolute;
    width: 100%;
}
.fixedwidth {
    position: relative;
}

Fiddle demo

Answer 2

我知道你对html和css的新手，但你真的需要在不同的文件中创建你的css，为此使用<link rel="stylecheet" href="style.css">

此外，您应该使用以下命令启动每个html文件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    (content)

</body>
</html>

但是要回答你的问题： “我的”内容div“中的我的div在行div”

的顶部有一个空格

如果div为margin-top :-( x）px;

，这很容易解决

我的CSS代码有什么问题？

2 个答案: