html - CSS float 时髦

Question

我的花车表现得很奇怪(好吧，我猜他们正在按照他们应该的方式行事)，但我似乎无法理解为什么。出于某种原因，包含“Alex”的 div 框总是转到另一行。我搞砸了什么吗？

样式.css

.clear {
    clear:both;
}
.page-header {
    width:100%;
    background:#efefef;
    border-bottom:1px #ddd solid;
    padding:3px 10px;
    margin-bottom:24px;
}
.page-header-title {
    width:200px;
    float:none;
}
.page-header-search {
    float:left;
    width:100px;
} 
.page-header-top_menu {
    float:right;
    width:200px;
}

index.html

<div class="page-header">
        <div class="page-header-search">
            blah
        </div>

        <div class="page-header-title">
            Calender
        </div>

        <div class="page-header-top_menu">
            Alex
        </div>

        <div class="clear"></div>
    </div>

非常感谢。

Answer 1

如果你交换

float: none;

用于“日历”-div

float: left;

“亚历克斯”表现得更好。

您没有指定它的外观。

http://jsfiddle.net/wDp3p/ << 我用红色边框可视化了您的 div 结构。

http://jsfiddle.net/wDp3p/1/ << 带 float 的版本:左；

“float”并非真正用于表格列之类的解决方案，而是用于 float - 因此“calender”-div 直接在其左手前一个元素之后 float 。