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

Question

正如您在我的jsfile中看到的：

.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并且没有父宽度。它的宽度目前由里面的内容控制。

为了解决这个问题，我给了它一个父分隔符，它设置为显示为table100% 宽度：

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

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

为了使#rightfoot内容向右对齐，我只是给出了text-align正确的 a ：

#rightfoot {
    text-align:right;
}

JSF中。