3

中央に配置された親 div で左右に 2 つの div をフロートさせたい。

CSS

body {
margin : 0px;
padding : 0px;
}

#wrapper {
width : 100%;
height : 100%;
border : 1px solid red;

}

#wrapper-header {
width : 1000px;
height : 100%;
border : 1px solid red;
margin : 0px auto;
}   

#wrapper-logo {
width : 250px;
height : 100px;
float : left;
border : 1px solid black;

}

#wrapper-navbar {
width : 250px;
height : 100px;
float : right;
border : 1px solid black;
}

とhtml

<div id="wrapper">
<div id="wrapper-header">
    <div id="wrapper-logo">
    </div>
    <div id="wrapper-navbar">
    </div>
</div>
</div>
</body>

しかし、上記のコードを適用すると、思い通りになりません。助けてください

4

4 に答える 4

5

あなたがそれを望んでいると仮定します：

<div id="wrapper">
    <div id="wrapper-header" class="cf"> 
        <div id="wrapper-logo">
            Left
        </div>
        <div id="wrapper-navbar">
            Right
        </div>
    </div>
</div>

CSS は次のようになります。

#wrapper-logo {
    float:left;
}

#wrapper-navbar {
    float:right;
}

少しclearfixを使用すると、うまくいきます。実際の例については、こちらを参照してください。

適切な幅の2 番目の例。

于 2013-04-26T07:01:44.417 に答える
0

float プロパティを追加していません:

#wrapper-logo {

    width : 250px;
    height : 90px;
    margin : 10px 0px 10px 10px ;
    border: 1px solid black;
    float: left;    
}

#wrapper-navbar{
    float: right; 
    width: 250px;   
}
于 2013-04-26T06:58:46.673 に答える
0

こんにちは、あなたの将来のすべてのプロジェクトであなたに良い解決策があります. プロジェクトを開始するclearfixと、すべてのフロートをクリアするクラス名を作成し、他の考えを作成します。フロート子を持つ親要素で毎回このクラスを使用します。

HTML

<div id="wrapper">
<div id="wrapper-header" class="clearfix">
    <div id="wrapper-logo">
    </div>
    <div id="wrapper-navbar">
    </div>
</div>
</div>

CSS

body {
margin : 0px;
padding : 0px;
}
// NEW CLASS //
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#wrapper {
width : 100%;
height : 100%;
border : 1px solid red;

}

#wrapper-header {
width : 1000px;
height : 100%;
border : 1px solid red;
margin : 0px auto;
}   

#wrapper-logo {
width : 250px;
height : 100px;
float : left;
border : 1px solid black;

}

#wrapper-navbar {
width : 250px;
height : 100px;
float : right;
border : 1px solid black;
}

デモ

http://jsfiddle.net/WKnbj/
于 2013-04-26T07:09:51.203 に答える
0

これを使用して、子divを左右にフロートさせ、親を体の中心にすることができます

<div id="wrapper">
    <div id="wrapper-header" class="cf"> 
        <div id="wrapper-logo">
            Left
        </div>
        <div id="wrapper-navbar">
            Right
        </div>
    </div>
</div>

このためのcss

wrapper-header{ 
    width:980px; 
    margin:0 auto; 
    overflow:hidden;
}    
#wrapper-logo{  
    float:left; 
}

#wrapper-navbar{
    float:right;
}
于 2013-04-26T07:10:51.163 に答える