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的一面：不要漂浮你的照片元素，你应该好好去。我还优化了你的照片div的css样式，因为你可以将photo-div类设置为所有的照片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);
}

CSS布局不能保持相同的位置

1 个答案: