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

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，最终的宽度将是窗口的50％+ 20px（这将使右浮动到换行）。如果你想在浮动的div上保持填充，添加box-sizing:border-box;（但旧的浏览器不支持它，所以最好为容器留下填充）

Answer 2

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

要解决这个问题，我已经给它一个父分隔符，它被设置为显示为table，宽度为100％：

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

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

要将#rightfoot内容与右侧对齐，我只是简单地给出了text-align的权利：

#rightfoot {
    text-align:right;
}

<强> JSFiddle