Question

抱歉可能是愚蠢的问题...

我的页脚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;
}

Answer 1

将css文件中的#footer更改为：

#footer {
    width:1000px;
    height:60px;
    background-color:grey;
    <!-- I ADDED THESE TWO LINES TO YOUR #FOOTER SELECTOR -->
    position: fixed;
    bottom: 0;
}

DIV神秘地被置于其他DIV后面？

1 个答案: