Question

我正在测试我的一个页面上的页脚，以便我可以将它放在每个页面上，但它无法正常显示。目前，页脚div中的div都是堆叠在彼此之上而不是彼此相邻。此外，div仅显示应显示的图像的一部分而不是整个图像。我也不确定如何在屏幕大小滑动的情况下适当地进行这些更改，因为div不会都是统一的大小，但应该总是占用屏幕的整个宽度。我的CSS是：

.page{
    height: 100%;
    width: 100%;
    text-align: center;
    }
    .bgood-footer{
        width:100%;
        height: 20%;
        position: fixed;
        bottom: 0;
    }
    .mobile-app{
        float: left;
        background-image: url('../images-source/mobile-app.png');
        background-repeat: no-repeat;
    }
    .talk{
        float: left;
        background-image: url('../images-source/talk-to-us.png');
        background-repeat: no-repeat;
    }
    .careers{
        float: left;
        background-image: url('../images-source/careers.png');
        background-repeat: no-repeat;
    }
    .press{
        float: left;
        background-image: url('../images-source/press.png');
        background-repeat: no-repeat;
    }
    .blank{
        float: left;
        background-image: url('../images-source/blank.png');
        background-repeat: no-repeat;
    }
    .fb{
        float: left;
        background-image: url('../images-source/fb.png');
        background-repeat: no-repeat;
    }
    .yt{
        float: left;
        background-image: url('../images-source/yt.png');
        background-repeat: no-repeat;
    }
    .tw{
        float: left;
        background-image: url('../images-source/tw.png');
        background-repeat: no-repeat;
    }
    .ig{
        float: left;
        background-image: url('../images-source/ig.png');
        background-repeat: no-repeat;
    }
    .ordering-loc{
        float: left;
        background-image: url('../images-source/ordering-loc.png');
        background-repeat: no-repeat;
    }

我的HTML是：

<div class="page">
  <div class="bgood-footer">
    <a href="/mobile-app">
      <div class="mobile-app">Mobile Application</div>
    </a>
    <a href="/talk-to-us">
      <div class="talk">Talk To Us</div>
    </a>
    <a href="/careers">
      <div class="careers">Careers</div>
    </a>
    <a href="/press">
      <div class="press">Press</div>
    </a>
    <div class="blank"></div>
    <a href="https://www.facebook.com/bgood">
      <div class="fb">FB</div>
    </a>
    <a href="https://www.youtube.com/user/unclefaris">
      <div class="yt">YT</div>
    </a>
    <a href="https://twitter.com/b_good_">
      <div class="tw">TW</div>
    </a>
    <a href="https://twitter.com/b_good_">
      <div class="ig">IG</div>
    </a>
    <div class="ordering-loc">Ordering From Location</div>
  </div>
</div>

Answer 1

因为你没有使用clearfix。我看了你的代码，但有很多重复，我没有想要粘贴占位符，看看它实际上看起来像什么。根据您的描述，您的问题的一部分在于没有正确清算而浮动。浮动元素时，必须修复父后缀，因为浮动会中断应用于块元素的自然块堆叠顺序。

我重复...向父母添加clearfix。 https://css-tricks.com/snippets/css/clear-fix/

你的第二个问题是你的页脚所有这些部分都显示没有指定宽度的图像。因为我不知道图片的内容很难说，但是如果你正在展示我的建议就是这样的画廊，那么裁剪照片使它们的大小相等。添加

img{
width:100%;
}

到你的css顶部，

最后，您可以为页脚项应用最大宽度和宽度值，以使其保持响应。（确保它们不超过100％）。我的意思是，你的页脚的所有小部分可以是宽度：10％;因此，当它们浮动时，所有宽度都增加到100％（这不会考虑边距和填充，所以要小心）

如果您希望我摆弄代码，请添加占位符图片，或将图片上传到图片托管网站，这样我就可以在屏幕上看到它的样子。

更新：我添加了占位符图片并为div增加了宽度。这是你更新的css

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.page{
    height: 100%;
    width: 100%;
    text-align: center;
    }
    .bgood-footer{
        width:100%;
        height: 20%;
        position: fixed;
        margin:0 auto;
        bottom: 0;
    }
    .mobile-app{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png-app.png');
        background-repeat: no-repeat;
    }
    .talk{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.pngo-us.png');
        background-repeat: no-repeat;
        width:120px;
    }
    .careers{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.pngs.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .press{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .blank{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .fb{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .yt{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .tw{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .ig{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
      width:120px;
    }
    .ordering-loc{
        float: left;
        background-image: url('https://i.imgur.com/zzP5pae.png');
        background-repeat: no-repeat;
width:200px;
    }

Answer 2

https://jsfiddle.net/bwvanwrL/

我想要display: inline-block。

a, .blank, .ordering-loc{
  display: inline-block;
  background-repeat: no-repeat;
}

你也应该尽量不要在自己的CSS中重复自己。这使得难以维护。

如果您希望项目间隔更远，我建议您添加padding: 0 10px;

通常情况下，我会尝试远离float，因为它与页面上的其他元素不相符。有关详细信息，请参阅此答案。 Are floats bad? What should be used in its place

左侧浮动不在我的页脚中工作，因此它没有正确显示内联

2 个答案: