抱歉这个可能很愚蠢的问题...
我的页脚 div 被放置在 div recentWinnersContainer 和 recentWinnersMapContainer 的后面，尽管它应该在它们下面。
这是我的 jsFiddle 和代码。
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="mainContainer">
<div id="navContainer">
<div id="logoImgContainer">
<img src="logo.png">
</div>
<p id="navLinks">Prizes Winners FAQ Contact Us</p>
</div>
<div id="slideShowContainer">
<img src="slide1.jpg">
</div>
<div id="offersContainer">
<div class="offersArrowImg">
<img src="leftOffersArrow.jpg">
</div>
<div class="offerContainer">
<img class="offerImg" src="offer1.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer2.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer3.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer4.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offersArrowImg">
<img src="rightOffersArrow.jpg">
</div>
</div>
<div id="recentWinnersHeadlineContainer">
<p id="recentWinnersHeadline">Recent Winners</p>
</div>
<div id="recentWinnersContainer">
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
</div>
<div id="recentWinnersMapContainer">
Map
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
CSS
* {
margin:0px;
padding:0px;
}
#mainContainer {
width:1000px;
margin:0 auto 0 auto;
}
#navContainer {
width:1000px;
height:75px;
background-color:#3299bb;
}
#logoImgContainer {
float:left;
margin:13px 0px 0px 20px;
}
#navLinks {
float:right;
margin: 15px 20px 0 0;
font-family: 'Roboto Slab', serif;
font-size:30px;
color:#ffffff;
}
#slideShowContainer {
width:1000px;
height:380px;
background-color:#000000;
}
#offersContainer {
width:1000px;
height:188px;
background-color:blue;
}
.offerContainer {
width:227px;
height:188px;
float:left;
background-color:red;
}
#offerImg {
width:227px;
height:146px;
}
.offersArrowImg {
float:left;
}
#recentWinnersHeadlineContainer {
width:1000px;
height:60px;
background-color:#ff9900;
}
#recentWinnersContainer {
width:495px;
height:320px;
float:left;
margin-right:10px;
background-color:yellow;
}
#recentWinnersHeadline {
}
.recentWinnerContainer {
height:50px;
}
.recentWinnerImg {
display:inline-block;
}
.recentWinnerName {
display:inline-block;
}
.recentWinnerPrizeName {
display:inline-block;
}
#recentWinnersMapContainer {
width:495px;
height:320px;
float:left;
background-color:green;
}
#footer {
width:1000px;
height:60px;
background-color:grey;
}
最佳答案
将您的 css 文件中的 #footer 更改为:
#footer {
width:1000px;
height:60px;
background-color:grey;
<!-- I ADDED THESE TWO LINES TO YOUR #FOOTER SELECTOR -->
position: fixed;
bottom: 0;
}
关于html - DIV 神秘地被放置在其他 DIV 的后面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26372640/