我的CSS代碼有什麼問題？

我是新來的HTML/CSS。我想建立一個網站，但我偶然發現了一個問題。我的CSS代碼有什麼問題？

我的「內容div」中的div在行div的頂部有一個空格，我似乎無法弄清楚是什麼導致了問題。有人可以幫忙嗎？我會大大讚賞它。

謝謝！

<head> 
 

 
<meta charset="utf-8"> 
 

 
<title>Vlad Olar</title> 
 

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

 
\t </style> 
 

 
</head>

<body> 
 

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

 
</body>

來源

2015-04-01 Vlad

我不是在瀏覽器中獲取任何空白 – 2015-04-01 12:49:57

這是因爲'的位置是：相對的;'和'top：-55px;'''＃foto'，'＃gaming'和'＃design'。你可以嘗試將'position：relative;'添加到'＃line'並將'＃foto'，'＃gaming'和'＃design'設置爲'position：absolute;'並調整'top'和相應的「左」值。 – 2015-04-01 12:52:10

由於@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

來源

2015-04-01 13:18:31

感謝您的幫助:)。 – Vlad 2015-04-03 09:18:38

我知道你的新的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>

但要anwser你的問題：「我的div在我的」合作ntent div「在行div頂部有一個空格」

這可以很容易地通過給定div margin-top來解決:-(x）px;

來源

2015-04-01 12:52:03

我的CSS代碼有什麼問題？

回答

相關問題