なぜdivが「浮動」できないのですか？

Question

私はフロートについて非常に混乱しています。 .twoは.one の右側にする必要がありますが、あなたがお互いに次のように2つのdivをしたい場合は.twoすぐ下.one

div { 
 
    width: 100px; 
 
    background: #FF9; 
 
} 
 
; 
 
.theone { 
 
    float: left; 
 
    font-size: 20px; 
 
}

<div class="theone">one</div> 
 
<div class="theright">two</div>

Answer 1

 .theright { 
    float: left; 
    font-size: 20px; 
} 

は、それをアドインそれ両者を正しく浮かべるのが最善です。 さらに、あなたは.theone、.therightで置き換えることができます。

Answer 2

divに追加表示：インラインブロック;

div{ 
     display: inline-block; 
    } 

Answer 3

デフォルトでは、divの値は「次の行から始まる」という意味の「ブロック」に設定されています。 すべてのdivのdisplay：inline-blockプロパティを追加すると、divを最初に作成するためにfloat：leftを追加できます。

Answer 4

div { 
 
    width: 100px; 
 
    background: #FF9; 
 
display: inline-block; 
 
} 
 
; 
 
.theone { 
 
    float: left; 
 
    font-size: 20px; 
 
}

<div class="theone">one</div> 
 
<div class="theright">two</div>

Answer 5

divがデフォルトでdisplay: blockを持っています。

divに別の表示タイプを設定したいと思うかもしれません。

div {width：100px;背景：＃FF9;表示：インライン; }

.theone {float：left; font-size：20px; }

See jsFiddle

Answer 6

私が試してみて、detailled作り、答えを説明します。浮動要素は、フローの初期位置から浮動します。基本的に浮動効果は、と宣言された要素（HTML構造の）にのみ影響します。

右浮動要素は、浮動小数点要素の後に宣言されます。したがって、通常はtherightがtheoneの下に表示され、浮動効果は表示されません。

要素を別の要素の右側に浮動させるには、の前にと宣言する必要があります。このために仕事に、theright要素がtheoneよりも大きいことが必要であることを

<div class="theright">two</div> 
<div class="theone">one</div> 
<style> 
    .theright { 
     float: right; 
    } 
</style> 

注：このように。さもなければ、theoneは全体的にtherightの内容をボックスの外に隠すでしょう。フローティング要素がフローから抜け出し、他の要素の上を移動するので、その内容はフローティングブロックを「回避」するからです。

異なるapprochと同じ結果を得るために、他の多くの方法がある：

• は（基本ブロック要素としてtherightを残す）の代わりに左のtheoneフロートを作る
• 両方の要素をインラインブロックを作りますそれらに適切な幅を与えてください
• 2つの要素だけの場合は必須ではありませんが、3つ以上の要素が並んでいる必要がある場合、それらをすべて左に浮かべることができます（または、あなたが望む最終レイアウトに応じて）
• など