0

私のフロートは奇妙な動作をしています (まあ、本来の動作をしていると思います) が、その理由が理解できないようです。何らかの理由で、'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>

どうもありがとうございました。

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 に答える