2つのdivの下にdivを配置する方法、左側にもう1つのdivが浮動する場合は？

ここに問題がありますが、私は単純なマークアップ頭、メニュー、フッター、およびコンテキストを持っています。メニューは左側にあり、右側にはコンテキストがあります。内側には3つのdivがあります。 2つのdivは1つの行になければなりません.3つ目のdivはその直下になければなりません。2つのdivの下にdivを配置する方法、左側にもう1つのdivが浮動する場合は？

問題は、3番目のdivがメニューの下に表示されることです。ここで

コメントを含むコードで、pelaseは、ルックみんなを持っている......私は完全にこの1については運命を感じ、どんな考えを持っていない....

<html> 
<head> 
<style> 

div.header{         border:1px  solid black } 
div.menu{clear:both;float:left;    border:1px solid blue} 
div.context{        border:1px  solid #0099CC} 
div.footer{clear:both;      border:1px solid  red} 

div.one {         border:1px  solid yellow} 
div.two {         border:1px  solid purple} 
div.three {         border:1px  solid green} 

</style> 
</head> 

<body> 

<div class="header"> 
    header 
</div> 
<div class="menu"> 
    menu<br>menu<br>menu<br>menu 
</div> 
<div class="context"> 
    <div class="one"  style="float:left">Div 1 <BR>Div 1 <BR>Div 1 </div> 
    <div class="two"  style="">Div 2</div> 
    <div class="three" style="clear:both">Div 3, what the hell are you doing here  under the menu? You should be just under the Div 1!</div> 
</div> 
<div class="footer"> 
    footer 
</div> 

</body> 
</html>

出典

2012-02-18 Anonymous

メニューが固定幅（200ピクセルなど）になる場合は、margin-left:200pxをdiv.contextに適用して、コンテキストdivの内容を揃えることができます。

あなたのメニューは、動的な幅を有している場合は、このCSSを使用します。この時のクイックを見てみましょう

div.context { 
border: 1px solid #0099CC; 
display: inline-block;

}

出典

2012-02-18 21:38:00

：

div.menu{ 
border: 1px solid blue; 
display: inline-block;

}

とコンテキストのためにインライン要素とブロック要素の違いを知るためのブログ投稿。デフォルトでは

http://www.techrepublic.com/article/learn-distinctions-between-inline-and-block-html-elements/6094821

、HTMLは、3つの方法のいずれかで、その要素が表示さ：

インライン：これらの要素は、その配置の前または後に新しい行を強制しない、それが唯一必要なだけのスペースを消費します。
ブロック：使用可能な全幅を消費する要素の前後に新しい行が表示されます。
非表示：メタタグやスクリプトセクション、スタイルセクションなど、ブラウザウィンドウ内に表示されない要素がいくつかあります。

出典

2012-02-19 00:19:29 Will

2つのdivの下にdivを配置する方法、左側にもう1つのdivが浮動する場合は？

答えて

関連する問題