向左浮动div，向右浮动其他div

Question

我正在尝试将菜单的浮动部分向左调整，另一部分向右调整。 但是，我无法使其正常工作。

我一直在尝试使用float来实现它，但是我无法完全实现它。

我如何以适当的方式做到这一点？

HTML

<div class="topbar">
    <div class="title">Title</div>

    <div class="topbar-boxes">

        <div class="topbar-boxes-left">
            <div class="topbar-box">Box1</div>
            <div class="topbar-box">Box2</div>
            <div class="topbar-box">Box3</div>
        </div>

        <div class="topbar-boxes-right">
            <div class="topbar-box">Box1</div>
            <div class="topbar-box">Box2</div>
            <div class="topbar-box">Box3</div>
        </div>

    </div>

    <div style="clear:both"></div>
</div>

CSS

.topbar {
    width: 100%;

    padding: 14px;

    font-size: 18pt;
    color: white;

    background-color: rgba(42, 42, 42, 0.95);
}

.title {
    float: left;
    padding-right: 50px;
}

.topbar-boxes {
    float: left;
    margin: -14px;
}

.topbar-boxes-left {
    float: left;    
}

.topbar-boxes-right {
    float: right;
}

.topbar-box {
    float: left;

    padding: 20px;

    border-left: 1px solid black;

}

http://jsfiddle.net/8eqSN/

Answer 1

您的问题是因为您正在浮动.topbar-boxes div。 浮动时，元素的长度应做得尽可能细（而不是像通常那样填充页面的宽度），所以浮动在工作 ，因为父div是仅与子元素一样宽。

要解决此问题，请删除此浮动：

.topbar-boxes {
    /*float: left; <----- remove this.*/
    margin: -14px;
}

Answer 2

这是因为float元素取决于要放置的父项的width ，因为box的父项topbar-boxes也是浮动的，因此width也不是100％。

根据您的结构，并且由于标题也浮动，我建议您删除该容器，并在其他容器上留出余量，一切正常：

.topbar-boxes-left {
  margin: -14px;
  float: left;    
}
.topbar-boxes-right {
  margin: -14px;
  float: right;
}

检查这个演示小提琴

Answer 3

容器div（.topbar-boxes）在每个元素中默认具有width：auto。 这意味着它的宽度将与其内容一样大。

尝试在.topbar框中设置width：100％。