排列我的頁面上的元素是不可思議的

我想擺出我的網頁，我面臨着一個大問題。我已將所有代碼包裝在標籤中，因爲我希望將所有內容都包含在不同顏色的額外背景中。排列我的頁面上的元素是不可思議的

然而，當我設置的屬性爲我的代碼發生這種情況：

這是因爲如果由底部元件與上述兩個以某種方式重疊。我正在使用列分隔符，我不知道這是否會影響它。這裏是我完整的CSS & HTML代碼：

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> 
<link rel='stylesheet' href='style.css'/> 
<script src='script.js'></script> 
</head> 
<body> 
<div class="nav"> 
    <div class="container"> 
     <ul class="pull-left"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Featured</a></li> 
      <li><a href="#">Coming Soon</a></li> 
     </ul> 
     <ul class="pull-right"> 
      <li><a href="#">Sign In</a></li> 
      <li><a href="#">Register</a></li> 
     </ul> 
      <div id="logo-game"> 
    <img src="http://upload.wikimedia.org/wikipedia/he/b/b7/Gamespot_logo.png"> 
</div> 
    </div> 
</div> 

<div class="jumbotron"> 
    <div class="container"> 
     <div class="feature-cont"> 
      <div id="feature-cont-back"> 
     <h1>100's Of Featured Game Reviews</h1> 
     <p>Browse through our collection of the most popular game reviews out there</p> 
     <a href="#">Find Out More</a> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="bodytwo"> 
<!--Recommened Section--> 
<div class="recommended"> 
<div class="text-center"> 
<div class="container"> 
    <ul> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Destiny.jpg"></li> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_CODAW.jpg"></li> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Evolve.jpg"></li> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_AssassinsCreed.jpg"</li> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FIFA.jpg"</li> 
    </ul> 
    <ul> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Forza.jpg"></li> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_BattlefieldHardlines.jpg"></li> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_GTAV.jpg"></li> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Halo.jpg"></li> 
     <li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FarCry4.jpg"> </li> 
    </ul> 
</div> 
</div> 
</div> 
<!--Start Of Tables--> 
<div class="mainc"> 
<div class="container"> 
<div class="row"> 
<div class="col-md-6"> 
<div class="new-game"> 
<table> 
    <tr> 
     <th colspan="3">Games</th> 
    </tr> 
    <tr> 
     <td> 
      <img src="http://static.gamespot.com/uploads/original/1197/11970954/2396871-battlefield4.jpeg"> 
      <p>Battlefield 4 is the genre-defining action blockbuster made from moments that blur the line between game and glory...</p> 
     </td> 
     <td> 
       <img src="http://images.pushsquare.com/games/ps3/fifa_14/cover_large.jpg"> 
       <p>This year it's all about the emotion of scoring great goals - the challenge of building play as a team...</p> 
     </td>  
     <td> 
      <img src="http://images.pushsquare.com/games/ps3/dead_island_riptide/cover_large.jpg"> 
      <p>Take on hundreds of Zombies at once as your screen becomes swamped with the undead all after one thing…. You!</p> 
     </td> 
    </tr> 
    <tr> 
     <td height="400"> 
       <img src="http://images.pushsquare.com/games/ps4/need_for_speed_rivals/cover_large.jpg"> 
      <p>High speed meets high stakes in Need for Speed: Rivals. Play as a lone-wolf racer or a team-based cop as you speed... </p> 
     </td> 
     <td> 
      <img src="http://images.pushsquare.com/games/ps4/watch_dogs/cover_large.jpg"> 
      <p>Join the Community and Social Team from GAME as they head to Paris for a special Watch Dogs event with Ubisoft!.. </p> 
     </td>  
     <td> 
      <img src="http://images.pushsquare.com/games/ps3/last_of_us/cover_large.jpg"> 
      <p>From the creators of the Uncharted Series comes an emotionally-charged experience that’ll keep you gripped...</p> 
     </td> 
    </tr> 
</table> 
</div> 
</div> 
<!--End Of Tables--> 

<!--Start of chart--> 
<div class="col-md-6"> 
<div class="table-chart"> 
<table class="background"> 
    <tr> 
     <th colspan="3"><h1>Game Charts</h1></th> 
    </tr> 
    <tr> 
     <td><h1>1</h1></td> 
     <td><img src="http://images.pushsquare.com/games/ps3/gran_turismo_6/cover_large.jpg"</td> 
     <td><h3>Gran Turismo</h3><a href="#" class="view-review">View Review</a></td> 
    </tr> 
    <tr> 
     <td><h1>2</h1></td> 
     <td><img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg"</td> 
     <td><h3>Call of Duty:Ghosts</h3><a href="#" class="view-review">View Review</a>  </td> 
    </tr> 
    <tr> 
     <td><h1>3</h1></td> 
     <td><img src="http://images.pushsquare.com/games/ps4/killzone_shadow_fall/cover_large.jpg"</td> 
     <td><h3>Killzone</h3><a href="#" class="view-review">View Review</a></td> 
    </tr> 
</table> 
</div> 
</div> 
</div> 
</div> 
</div> 
<!--End of chart--> 
</div> 
<div class="feature-article"> 
<div ="feature-back"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <h2>Call Of Duty: Ghosts</h2> 
      <img src="http://eaglerising.com/wp-content/uploads/2013/11/call_of_duty_ghosts-hd-300x180.jpg"> 
      <p>Build your team and take up to 6 of them into battle in the all new Squads mode. This mode takes the best parts of the multiplayer experience and allows you to play either solo or cooperatively with the custom soldiers created and leveled up in multiplaye</p> 
     </div> 
     <div class="col-md-4"> 
     <div id="feature_back"> 
      <h2>Grand Theft Auto V</h2> 
      <img src="http://ronewiznation.files.wordpress.com/2013/10/grand-theft-auto-game-cover.jpg?w=300&h=180"> 
      <p>Grand Theft Auto V Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets, and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV. </p> 
     </div> 
     </div> 
     <div class="col-md-4"> 
      <h2>Assasins Creed</h2> 
      <img src="http://www.ketubanjiwa.com/wp-content/uploads/2013/12/Assassins-Creed-IV-Black-Flag-Freedom-Cry-DLC-Reloaded-Single-Link-300x180.jpg"> 
      <p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.</p> 
     </div> 
    </div> 
</div> 
</div> 
</body> 
</html>

CSS：

body { 
background-color:#121212; 
} 
.bodytwo { 
background-color:white; 
position:relative; 
} 
.nav { 
background-color:black; 
width:100%; 
position:fixed; 
z-index:5; 
} 
.nav li { 
display:inline; 
} 
.nav a { 
padding:10px 8px; 
position:relative; 
top:6px; 
color:#FF6600; 
text-transform:uppercase; 
} 
#logo-game img { 
position:relative; 
height:50px; 
left:20%; 
} 
.jumbotron { 
position:relative; 
top:50px; 
background-image:url('http://collectortoys.net/wp-content/uploads/2014/06/battlefield-4-server-bannerladder-standings-for-xboxone-battlefield-4---bf4-xbox-one-mretosqa.jpg'); 
height:500px; 
z-index:2; 
background-size:cover; 
} 
.feature-cont { 
position:relative; 
left:800px; 
width:350px; 
color:white; 
z-index:2; 
} 
#feature-cont-back { 
background-color:rgba(20,20,20,.5); 
width:400px; 
height:400px; 
position:relative; 
border-radius:10px; 
padding:5px; 
z-index:1; 
} 
.jumbotron h1 { 
font-family:ubuntu, Arial; 
} 
.recommended li { 
display:inline; 
margin:auto; 
float: none; 
position:relative; 
top:80px; 
} 
.new-game { 
position:relative; 
} 
.new-game td, th { 
padding: 0.5; 
} 
.new-game table { 
border-collapse:separate; 
border-spacing:15px 10px; 
border: 1px solid black; 
border-top-left-radius:10px; 
border-top-right-radius:10px; 
border-bottom-left-radius:10px; 
border-bottom-right-radius:10px; 
} 
.new-game tr { 
padding:10px; 

} 
.new-game tr th { 
text-align:center; 
color:white; 
font-family:ubuntu; 
font-size:25px; 
} 
.new-game td { 
padding:10px; 
width:100px; 
height:200px; 
vertical-align:top; 
background-color: rgba(24,24,24,.2); 
border-top-left-radius:10px; 
border-top-right-radius:10px; 
border-bottom-left-radius:10px; 
border-bottom-right-radius:10px; 

} 
.new-game td p { 
text-align:center; 
font-family:arial; 
font-size:12px; 
color:white; 
} 
.new-game td img { 
width:100px; 
height:100px; 
} 
.background { 
background: url("http://i1057.photobucket.com/albums/t390/Alexwileyy/box-01_zpsdd34bf84.png") 
no-repeat; 
height:500px; 
width:424px; 

} 
.table-chart table { 
position:relative; 
border-collapse:separate; 
} 
.table-chart tr td h3 { 
width:150px; 
text-align: center; 
font-family:Arial; 
font-size:20px; 
position:relative; 
top:-20px; 
color:black; 
} 
.table-chart td a { 
position:relative; 
top:-20px; 
} 
.table-chart td img { 
width:100px; 
height:100px; 
} 
.table-chart th h1 { 
text-align:center; 
font-family:ubuntu; 
color: #dd6a15; 
text-shadow: 0 2px rgba(0,0,0,0.75); 
} 
.table-chart td { 
padding:15px; 
box-shadow: 0 3px 1px rgba(26,26,26,0.75); 
} 
.feature-article { 
position:relative; 
clear:both; 
height:400px; 
border-bottom:3px solid #2f2f2f; 
border-top:3px solid #2f2f2f; 
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/1_zps87c3163e.jpg'); 

} 
.feature-article .col-md-4 { 
width:370px; 
height:200px; 
text-align:center; 
margin:auto; 
z-index:1; 
} 
.feature-article .col-md-4 img { 
width:300px; 
height:180px; 
} 
.feature-article .col-md-4 p { 
width:350px; 
} 
#feature_back { 
clear:both; 
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/line-01_zps79e6ad19.png'); 
height:400px; 
width:370px; 
padding-left:10px; 
background-repeat:no-repeat 
} 
/*Buttons Design*/ 
.view-review { 
margin-top: 0px; 
margin-right: 0px; 
padding: 14px 26px; 
font-size: 14px; 
line-height: 100%; 
text-shadow: 0 1px rgba(0, 0, 0, 0.4); 
color: #fff; 
display:inline-block; 
vertical-align: middle; 
text-align: center; 
cursor: pointer; 
font-weight: bold; 
transition: background 0.1s ease-in-out; 
/*for different browsers */ 
-webkit-transition: background 0.4s ease-in-out; 
-moz-transition: background 0.1s ease-in-out; 
-ms-transition: background 0.1s ease-in-out; 
-o-transition: background 0.1s ease-in-out; 
/*END*/ 
text-shadow: 0 1px rgba(0, 0, 0, 0.3); 
color: #fff; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
font-family: 'Helvetica Neue', Helvetica, sans-serif; 
} 
.view-review:active { 
padding-top: 15px; 
margin-bottom: -1px; 
} 
.view-review, .view-review:hover, .view-review:active { 
outline: 0 none; 
text-decoration: none; 
color: #fff; 
border-radius: 3px; 
} 

.view-review { 
background-color: #2f2f2f; 
box-shadow: 0px 3px 0px 0px #ea6300; 
width:150px; 
height:35px; 
} 
.view-review:hover { 
background-color: #454545; 
} 
.mainc .row { 
position:relative; 
top:80px; 
}

總之我想有白色背景纏只在頁面運行的表元素一直向下，但底部元素與表格重疊。任何想法都可以做到嗎？

來源

2014-07-15 Alex Wiley

問題是你給'.mainc .row'一個'top：80'。這會導致重疊。刪除它，你的頁腳不會重疊內容。另外，給'.mainc'類提供'margin-top：100px'。這將解決新的重疊問題。

您需要學習更有效地使用引導程序。不要害怕濫用bootstrap的'容器'和'行'div。把這些元素想象成一些大的樂高集團，它們將自己疊加在一起。

此外，我不會推薦使用表格，因爲它們是老派和少編輯友好。使用DIV，你將擁有更多的控制權，他們將通過引導更容易地進行調整。

如果您希望您的網站具有響應能力，請通過添加所有引導'col-x-x'類來了解如何縮放和放置相應列。

來源

2014-07-15 20:58:26 IndieRok

非常感謝，只是剛剛開始編碼，它讓我感到困惑，尤其是bootstrap。不知道如何弄清楚這一切，但我相信我會最終到達那裏 –

很高興我能幫上忙！不要擔心，練習會讓你完美，就像在大多數情況下一樣。堅持下去，你會變得更好。我完全理解你。如果你有空閒時間，不要猶豫，檢查[bootstrap自己的文檔（CSS，組件和Javascript）]（http://getbootstrap.com/css/）和實驗。我覺得有用的一個漂亮的技巧是在構建佈局時爲我的所有DIV添加背景顏色。這樣你就可以看到它們是否被正確堆疊，具有所需的寬度等。這個網站也是有用的[CSS-Tricks]（http://css-tricks.com/）。 – IndieRok

您正在添加position:relative無緣無故。一般而言，您可以使用position:relative來爲絕對定位的子元素設置定位點。然後，您可以使用position:absolute在佈局中移動這些元素。

如果您需要執行元素定位的微小調整，請使用margin:而不是position:relative。

來源

2014-07-15 18:11:35

排列我的頁面上的元素是不可思議的

回答

相關問題