html - フロートdivを整列させる方法

Question

divフローティングに問題があります。

左に浮かぶ2つのDIVを使用しましたが、div 2に大きなテキストがある場合、div 1の下に読み込まれます。これを防ぐには、2つのdivをインラインで読み込む必要があります。インラインブロックを使用しましたが、機能しませんでした。

http://jsfiddle.net/pS6Gg/

<div style="width: 100%;overflow:hidden;">
 <div style="float: left;width:">Left Stuff</div>
 <div style="float: left;margin-left:10px;">    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 <br style="clear: left;" />
</div>

ありがとう

Answer 1

両方の要素に幅パラメータを設定する必要があります。<div>

Answer 2

どういうわけかこのように：

<div style="width: 100%; overflow:hidden;">
 <div style="float: left;width:20%">Left Stuff</div>
 <div style="float: left;width:80%">Right Stuff</div>
</div>

ただし、このようなレイアウト手法を使用することはお勧めしません。後で、ページをモバイルや小さなディスプレイデバイスに移植することを検討するときに問題が発生する可能性があるためです。

よろしく。

Answer 3

さて、コンテンツが長すぎて両方のDIVを同じ行に表示できない場合は、どうしますか？2行目を使用するか、表示されたコンテンツを切り捨てる必要があります。

<span>2行目に進むことはすでに行われていることなので、必要に応じて2番目の効果を実現するなどのインライン要素の使用を検討してください。例。

Answer 4

http://jsfiddle.net/pS6Gg/4/またはhttp://jsfiddle.net/pS6Gg/5/はそれを行いますか？

最初の可能性は、2番目のdivが最初のdivの周りを流れるようにします。

<div style="float: left; width: 50px;">Left Stuff</div>
<div style="margin-left:10px;">... text ...</div>

2つ目は、最初のdivの幅を定義し、親divに子が塗りつぶすための定義された高さを与えることにより、列効果を作成します。

<div style="width: 100%;overflow:hidden; height:200px;">              <-- parent height 
<div style="float: left; width: 50px; height:100%;">Left Stuff</div>
<div style="margin-left:10px; height:100%;"> 

Answer 5

    <div style="width:800px;">
    <div style="float: left;">Left Stuff</div>
    <div style="padding-left:80px;">....</div>

パディングで試してください-80px左に...あなたのフィドルでの動作..試してみてください