html - 内部 div がコンテナ div の下に表示されるのはなぜですか?

Question

私の記事の div がサイドバーの div の下に表示される理由を誰か説明してもらえますか?

http://www.api.jonathanlyon.com/getpocket/view.html

最初にドロップダウンでアイテムを選択する必要があります

ありがとう

ジョナサン

Answer 1

float:leftあなたcontainerとarticlesdivを取り除く

Answer 2

「コンテナ」div の float 属性を削除すると、正しく機能します。

[編集] 'bigcontainer' の float 属性も不要です。

この問題の原因はおそらく次のとおりです。囲んでいる要素の寸法を計算するときに、浮動要素が無視されます。「lsidebar」と「container」の両方をフローティングしたため、「bigcontainer」には何も残っておらず、計算された幅はゼロです。その結果、'container' 要素を配置すると、囲んでいる 'bigcontainer' 要素に水平方向のスペースが残っていないため、'lsidebar' 要素の下に配置されます。

Answer 3

私の懸念によると、マークアップは次のようになります。

<div id="mainWrap">
<div id="sidebar">
</div>
<div id="article">
</div>
</div>

そのスタイリングは次のようになります

#mainWrap{
#some basic styling like width 
}
#sidebar{
#some basic styling like width and float:left
}
#article{
#some basic styling like width and float:right
}

標準のマークアップと css 標準に従っています。

あなたの場合、コンテナにはfloat:left があり、これが大きすぎるため、ダウンします。float:leftを削除すると問題ありません。

ありがとうございました！

Answer 4

これは、<div id="container">幅が広すぎるためです。幅を狭くすると、サイドバーのすぐ横に表示されます。