0

wordpressの出発点としてemptycanvasを使用しました。max-width:1250px; で .wrapper の幅を 80% に設定しました。

コンテンツ/サイドバーを保持するコンテナは幅 100% に設定され、コンテンツには幅が設定されておらず、float:left; に設定されています。他にオプションがない場合、サイドバーは 350px に設定されます。with float:right....何らかの理由でフロートを拒否し、常にコンテンツの下に移動します! たとえば、コンテンツに 500px の幅を設定すると、すべてが適切に配置されます....指定された幅がないと、その周りに浮かぶアイテムに自動的に調整されると思いました...ここで何が間違っていますか?

残念ながら、これはローカル サーバー上にあるため、正確なコードを表示することはできませんが、ここでお伝えしていないことは何もありません..

ありがとう！

4

1 に答える 1

2

レイアウトが意図したとおりに機能するためには、2つの問題を修正する必要があります（説明に基づいて作成したコードを以下に示します）。

  1. コンテンツdivの幅を指定する必要があります。それ以外の場合、divの幅は、その中のコンテンツの幅によって決まります。これでは、管理しやすいレイアウトを提供できません。

  2. 2つのフローティングDIVをコンテナdiv内に含めることはできません（以下で行ったように、コンテナ、コンテンツ、サイドバーdivに異なる背景を与えることでこれを確認できます）これは、非フローティング分割にはフローティングコンテンツのみを含めることができないためです。デフォルトでは表示設定（divのデフォルトの表示プロパティはblockです）。この問題を解決するには、コンテナの表示プロパティをテーブルに変更する必要があります。コンテナ内にコンテンツとサイドバーを含めるもう1つの方法は、フロートされていないdivをもう1つ追加し、フロートされたオブジェクトからクリアすることです（clear：both）。

    HTML

    <body>

    <div id="wrapper">
        <div id="container">
                <div id="content">
                     <h1> I am inside content. what will happen if I increase the content in here? </h1>
                </div><!--End of content-->
                <div id="sidebar">
                      <h1> I am inside the side bar </h1>
                </div><!--End of sidebar-->
        </div><!--End of container-->

    </div><!--End of wrapper-->

</body>

CSS

#wrapper{
margin:0 auto;
width:80%;
max-width:1250px;
}
#container{
width:100%;
background:red;
display:table; /*This is necessary to wrap the two floated contents inside. The other way of achieving same result is to add some non-floated div and set to clear floated contents*/
}
#content{
float: left;
background:green;
}
#sidebar{
width:350px;
float: right;
background:blue;
}
于 2012-11-25T06:38:13.957 に答える