html - 左浮动在我的页脚中不起作用，因此它无法正确显示内联

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。我查看了您的代码，但有太多重复，我不想粘贴占位符来查看它的实际外观。根据您的描述，您的问题的一部分在于 float 而没有正确清除。当您 float 元素时，您必须修复父后缀，因为 float 会破坏应用于 block 元素的自然 block 堆叠顺序。

我重复一遍...将clearfix添加到父级。 https://css-tricks.com/snippets/css/clear-fix/

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

img{
width:100%;
}

到你的 CSS 顶部，

最后，您可以将最大宽度和宽度值应用于页脚元素以保持响应。 (确保它们不超过 100%)。我的意思是，页脚的所有小部分都可以是 width:10%;因此，当它们在线 float 时，所有宽度都会增加到 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;
    }