向左浮动，向右浮动不起作用

Question

如您在我的jsfidle中所见 ：

.footer {
  background-image:url('/images/footer_bg.png') bottom repeat-x;
  height: 110px;
}
#footercontent {
  display:table-cell;
  vertical-align: middle;
  height:110px;
}
#leftfoot {
  float: left;
  font-family:maven;
  font-size: 15px;
  padding-left: 20px;
}
#rightfoot {
  float: right;
}

#rightfoot右浮动分隔符未显示在页面的右侧，而是显示在#leftfoot旁边，为什么？

Answer 1

您没有设置宽度，因此它们会一直扩展到浏览器窗口，因此请向下方推。 要使其并排，请声明宽度。

例如，我声明：

#leftfoot, #rightfoot {
    width:50%;
}

演示： JSFiddle

注意：请参见我在容器中声明了填充，而不是浮动div。 如果您留在浮动div上，则最终宽度将是window + 20px的50％（这将使正确的浮动浮动到换行符）。 如果要在浮动div上保持填充，请添加box-sizing:border-box; （但旧浏览器不支持，因此最好为容器保留填充）

Answer 2

发生这种情况是因为您的#footercontent设置为显示为table-cell ，并且没有父级宽度。 当前它的宽度由其中的内容控制。

为了解决这个问题，我给了它一个父分隔符，该分隔符设置为以100％宽度显示为table ：

<div id="footerContainer">
    <div id="footercontent">
        ...
    </div>
</div>

#footerContainer {
    display:table;
    width:100%;
}

为了使#rightfoot内容向右对齐，我只给出了right的text-align方式：

#rightfoot {
    text-align:right;
}

JSFiddle 。