html - CSS布局不在同一个位置

Question

我有一个我正在使用的网站的布局，基本上我有大约 10 页，但我的页脚不会留在同一个地方。我尝试了很多不同的代码变体，但都没有成功。

页脚应位于页面底部的每个页面的相同位置。

我对此很陌生，如果有任何明显的错误，请多多包涵。

我创建了一个 JSFiddle，其页脚位于底部，但它已安装到我需要的最下方。

#footer {
  width: 100%;
  height: 20px;
  text-align: center;
  clear:both;
  position:relative;
}

http://jsfiddle.net/mjbL7tcx/

我用另一个页面创建了另一个 JSFiddle，但它完全不在我想要的位置。 http://jsfiddle.net/dej6b2df/

非常感谢任何建议。

Answer 1

我在您的两个示例页面上修复了您的 HTML 代码(太长而无法作为代码块发布且不必要):

Page 1

Page 2

解决方案是在 CSS 方面:不要 float 您的照片元素，这样就可以了。我还为你的照片 div 优化了你的 css 样式，因为你可以为你所有的照片 div 设置一个 photo-div 类，将它们设置为一个组，并使用它们的数字类(例如: photo-div1) 设置背景图片:

.photo-div {
    width: 241px;
    height: 400px;
    margin-left: 60px;
    margin-top: 90px;
    border: 2px solid #333;
    box-shadow: 0px 7px 7px #999;
    overflow: hidden;
    display:inline-block;
}
.photo-div1 {
    background-image: url(images/wildlife/cow.jpg);
}
.photo-div2 {
    background-image: url(images/food/ice-cream.jpg);
}
.photo-div3 {
    background-image: url(images/flowers/blue-bells.jpg);
}
.photo-div4 {
    background-image: url(images/sport/cycling-zoom.jpg);
}