0

私は XHTML と CSS に非常に慣れていないため、フロートを機能させることができません。どういうわけか、「wrapper」の下と右側に「fondo_header」が表示され続けます。

これは HTML コードです。

<div id="header">
        <div id="wrapper">
            <div id="figure">
                    <img src="images/logo_2nd_225x1182_forWeb.jpg" alt="Logo" width="225" height="118">

            </div>
        </div>
            <div id="fondo_header">
                <div id="nav">
                    <ul>
                        <li><a href="#">Inicio</a></li>
                        <li><a href="#">Servicios</a></li>
                        <li><a href="#">Contacto</a></li>
                        </ul>
                </div>
            </div>

</div>

そしてCSS：

#header{
    margin-top: 20px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
       }

#fondo_header{
       width: 74%;
       float: right;
       background: url(images/header.jpg);

       }

#wrapper{
    width: 250px;
    /*float:left;*/
    height:auto;
    background-color:#f2dfce;
        }

「wrapper」と「fondo_header」を隣り合わせにする必要があります。すべてのdivの幅は正しいはずです。また、ピクセル、さまざまな幅、マージンの追加、パディング、さまざまなフローティングスタイル、およびあまりにも多くのことを試しましたが、何も機能しません。

同じ結果でIE9、Chrome、FFを試しました。マージンとパディングがリセットされました。

この時点で、かなり明白な何かを見落としていると確信しています。どんな助けでも大歓迎です。

4

3 に答える 3

0

ヘッダーが収まるほど小さい限り、問題なく動作するようです。各要素に十分なスペースを与えていますか? 1 つの要素の幅にパーセンテージを使用し、もう 1 つの要素にピクセルを使用すると、画面の幅に応じて異なる結果が得られます。

#header{
    margin-top: 20px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
       }

#fondo_header{
       width: 30%;
       float: right;
       background: url(images/header.jpg);

       }

#wrapper{
    width: 250px;
    float:left;
    height:auto;
    background-color:#f2dfce;
        }​

http://jsfiddle.net/ARvw3/

于 2013-01-03T20:21:57.583 に答える
0

フローティング要素の幅がコンテナの幅を超えてはならないフローティングを使用する場合、それ以外の場合は2行目に移動します

あなたの場合、fonto_header の 74% + ラッパーの 240px は、ヘッダーの幅よりも大きくなります。ラッパーの幅を 26% に設定することで修正できます。

または両方に静的な値を設定する

于 2013-01-03T20:22:09.680 に答える
0

#fondo_headerと#wrapper左の両方に浮かべる必要があります。また、要素をフロートするときはoverflow: hidden、親要素に設定する必要があるため、コンテンツの高さに収まります。
これを見てください。フロートをよりよく理解するのに役立ちます: All About Floats。
編集：#wrapper左と右へのフローティング#fondo_headerも機能します。

于 2013-01-03T20:20:58.160 に答える