0

我的花车表现得很奇怪（好吧，我猜他们表现得像他们应该做的那样），但我似乎不明白为什么。出于某种原因，包含“亚历克斯”的 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;
}

索引.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>

非常感谢你。

4

2 回答 2

0

你错误地浮动它。您应该将float属性分配给.page-header-title.

于 2013-03-04T01:22:47.900 回答
0

如果你交换

float: none;

对于“日历”-div

float: left;

“亚历克斯”表现更好。

您没有指定它的外观。

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

http://jsfiddle.net/wDp3p/1/ << 带浮动的版本：左；

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

于 2013-03-04T01:24:14.967 回答