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

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 。