Question

我的花车表现得很奇怪（好吧我猜他们的演技应该如何），但我似乎无法理解为什么。由于某种原因，包含'Alex'的div框总是下到另一行。有什么我搞砸了吗？

的style.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属性分配给.page-header-title。

Answer 2

如果您交换

float: none;

用于“日历”-div with

float: left;

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

你没有说明它应该是什么样子。

http://jsfiddle.net/wDp3p/＆lt;＆lt;我用红色边框可视化你的div结构。

http://jsfiddle.net/wDp3p/1/＆lt;＆lt;版本与浮动：左;

“float”不是真的适用于像表格列这样的解决方案，而是用于浮动 - 所以“日历”-div直接在其左手前一个元素之后浮动。

CSS漂浮时髦

2 个答案: