1. 首頁
  2. 問答
  3. 網頁內容未對齊，自動浮動到左上角。如何正確對齊我的元素？

網頁內容未對齊，自動浮動到左上角。如何正確對齊我的元素？

2011-08-13 76 views
0

對不起noob源代碼，我有很多東西要學習和打磨。每當我使用float: left/right時，它都會正確對齊。如果我刪除每個div /元素中的浮動元素，出於某種原因，我的所有圖像和所有內容都會聚集在容器的左上角。網頁內容未對齊，自動浮動到左上角。如何正確對齊我的元素？

網頁：http://eveo.org/scd/site/

CSS：

body { background: #e9e6e3 url('http://eveo.org/scd/site/images/bg.png') no-repeat center top; 
     margin: 0; 
     padding: 0; } 

#content { width: 960px; height: 500px; margin: 0 auto; } 

# header { height: 76px; width: 960px; } 

    .logo { 
     background: url('http://eveo.org/scd/site/images/logo.png'); 
     width: 276px; 
     height: 76px; 
     float: left; 
     } 

    .ad { 
     background: url('http://eveo.org/scd/site/images/ad.png'); 
     width: 641px; 
     height: 76px; 
     float: right; 
     } 

# nav_search { 
    height: 98px; 
    width: 960px; 
    } 

    .navbar { 
     width: 729px; 
     height: 38px; 
     background-image: 
      -webkit-gradient(
      linear, 
      left bottom, 
      left top, 
      color-stop(0.29, rgb(0,0,0)), 
      color-stop(0.88, rgb(88,88,90)) 
      ); 
     background-image: 
      -moz-linear-gradient(
      center bottom, 
      rgb(0,0,0) 29%, 
      rgb(88,88,90) 88% 
      ); 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
     margin: 30px 0 30px 0; 
     float: left; 
     } 

    .search { 
     background: #FFFFFF; 
     width: 214px; 
     height: 36px; 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
      -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4); 
      -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4); 
      box-shadow: inset 0 3px 8px rgba(0,0,0,.24); 
     float: right; 
     margin: 30px 0 30px 0; 
     border: 1px solid #b9b9b9; 
     } 

#news_stream { 
    background: url('http://eveo.org/scd/site/images/news_bg.png'); 
    width: 960px; 
    height: 232px; 
    float:right; 
    } 

#events { 
    background: url('http://eveo.org/scd/site/images/events.png'); 
    height: 51px; 
    width: 960px; 
    margin: 30px 0 30px 0; 
    float: left; 
    } 

/* panels */ 

#panels { 
    height: 156px; 
    width: 960px; 
    } 

    #panels .community { 
     background: url('http://eveo.org/scd/site/images/panel/community.png'); 
     height: 156px; 
     width: 342px; 
     float: left; 
     } 

    #panels .team_roster { 
     background: url('http://eveo.org/scd/site/images/panel/team_roster.png'); 
     height: 156px; 
     width: 282px; 
     float: left; 
     } 

    #panels .tournaments { 
     background: url('http://eveo.org/scd/site/images/panel/tournaments.png'); 
     height: 156px; 
     width: 312px; 
     float:right; 
     }

INDEX.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

    <title>StarCraftDream.com - Team SCD</title> 
    <!-- STYLESHEETS: grid_layout, stylesheet, fonts, slide, shadowbox --> 
    <link href="css/stylesheet.css" type="text/css" rel="stylesheet" /> 

</head> 

    <body> 
    <!-- spacing purposes • will remove later, noob code FTL --> 
     <br /><br /><br /> 
    <!-- spacing purposes --> 

     <div id="content"> 

      <div id="header"> 
       <div class="logo"></div> 
       <div class="ad"></div> 
      </div> 

      <div id="nav_search"> 
       <div class="navbar"></div> 
       <div class="search"></div> 
      </div> 

      <div id="news_stream"> 
      </div> 

      <div id="events"> 
      </div> 

      <div id="panels"> 
       <div class="community"></div> 
       <div class="team_roster"></div> 
       <div class="tournaments"></div> 
      </div> 
     </div> 

    </body> 
</html>

來源

2011-08-13 eveo

+0

我沒有答案給你，但如果你有沒有準備好，在Firefox中安裝螢火，並用它來啓用和禁用您網頁上的不同風格。這是一個很好的方式，可以在你學習的時候獲得一個有效的反饋循環。 –

回答

1

良好的一天，親愛的主席先生！浮動元素是一個微妙的問題，重要的是你知道它是如何工作的，以及元素是「流入」還是「流出」。不知道有什麼區別會產生意想不到的結果。

爲基準嘗試儘可能少的浮動，因爲它可能會比較混亂快。幸運的是，你的佈局並不複雜（雖然看起來不錯！）。

你想做的事，迫使正常的元素元素之後，以顯示在浮動有一點很清楚他們。你可以通過添加清除屬性clear：[left | right | both]來清除浮動項目上的左浮動項目，右浮動項目或兩者，從而分別清除浮動項目...我修改了佈局，只有nessacery元素漂浮，其餘元素保持流動。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

    <title>StarCraftDream.com - Team SCD</title> 
    <!-- STYLESHEETS: grid_layout, stylesheet, fonts, slide, shadowbox --> 
    <link href="css/stylesheet.css" type="text/css" rel="stylesheet" /> 

</head> 

    <body> 

     <div id="content"> 

      <div id="header"> 
       <div class="logo"></div> 
       <div class="ad"></div> 

       <div class="clearl"></div> 
      </div> 

      <div id="nav_search"> 
       <div class="search"></div> 
       <div class="navbar"></div> 

       <div class="clearr"></div> 
      </div> 

      <div id="news_stream"> 
      </div> 

      <div id="events"> 
      </div> 

      <div id="panels"> 
       <div class="community"></div> 
       <div class="team_roster"></div> 
       <div class="tournaments"></div> 

       <div class="clearl"></div> 
      </div> 
     </div> 

    </body> 
</html>

至於那與雲的CSS：

body { 
    background: #e9e6e3 url('http://eveo.org/scd/site/images/bg.png') no-repeat center top; 
    margin: 0; 
    padding: 0; 
    overflow-y: scroll; /* IE adds a scrollbar by default, this forces the rest of the browsers to add one too even if no scrolling is required */ 
} 

#content { 
    width: 960px; 
    /*height: 500px; Why set a height when you can let elements expand this block as they which? */ 
    margin: 0 auto; 
    padding: 50px 0; /* content now has whitespace in the top and bottom */ 
} 

#header { 
    /* We don't need to set styles here ;) */ 
} 

    .logo { 
     background: url('http://eveo.org/scd/site/images/logo.png'); 
     width: 276px; 
     height: 76px; 
     float: left; 
    } 

    .ad { 
     background: url('http://eveo.org/scd/site/images/ad.png'); 
     width: 641px; 
     height: 76px; 
     float: right; 
    } 

#nav_search { 
    padding: 30px 0; 
} 

    .navbar { 
     width: 729px; 
     height: 38px; 

     background-image: 
      -webkit-gradient(
      linear, 
      left bottom, 
      left top, 
      color-stop(0.29, rgb(0,0,0)), 
      color-stop(0.88, rgb(88,88,90)) 
     ); 

     background-image: 
      -moz-linear-gradient(
      center bottom, 
      rgb(0,0,0) 29%, 
      rgb(88,88,90) 88% 

     ); 

     -moz-border-radius: 3px; 
     border-radius: 3px; 
    } 

    .search { 
     background: #FFFFFF; 
     width: 214px; 
     height: 36px; 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
      -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4); 
      -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4); 
      box-shadow: inset 0 3px 8px rgba(0,0,0,.24); 
     float: right; 
     border: 1px solid #b9b9b9; 
    } 

#news_stream { 
    background: url('http://eveo.org/scd/site/images/news_bg.png'); 
    height: 232px; 
} 

#events { 
    background: url('http://eveo.org/scd/site/images/events.png'); 
    height: 51px; 
    margin: 30px 0 30px 0; 
} 

/* panels */ 

#panels { 
    /* We don't need to set styles here ;) */ 
} 

    #panels .community { 
     background: url('http://eveo.org/scd/site/images/panel/community.png'); 
     height: 156px; 
     width: 342px; 
     float: left; 
    } 

    #panels .team_roster { 
     background: url('http://eveo.org/scd/site/images/panel/team_roster.png'); 
     height: 156px; 
     width: 282px; 
     float: left; 
    } 

    #panels .tournaments { 
     background: url('http://eveo.org/scd/site/images/panel/tournaments.png'); 
     height: 156px; 
     width: 312px; 
     float:right; 
    } 


.clearl { 
    font-size: 0; 
    line-height: 0; 
    height: 0; 
    clear: left; 
} 

.clearr { 
    font-size: 0; 
    line-height: 0; 
    height: 0; 
    clear: right; /* You'll notice I added some extra styles here, this is to make sure IE doesn't force the extra block element to have any sort of layout and messing things up in the process */ 
}

來源

2011-08-14 14:29:24 sg3s

相關問題

 相關問題