0

これは私には意味がありません。これについて調べてみましたが、なぜ重複しているのかわかりません。「img」タグを使用したためか、どこかで何らかの位置タイプを使用する必要があるためだと感じていますが、試してみましたが機能しませんでした。

http://jsfiddle.net/FhU3r/

#picdiv {
height:405px;
width:320px;
border:1px solid black;
margin:15px;
    float:left;
 }

#rightdiv {
width:620px;
height:320px;
border:1px solid black;

 } ​

<div id="picdiv">
<center><img src="img.png" /></center>
<div id="quote">
"Here's Some Inspirational Text Like OMG!"
</div> <!-- end quote -->
</div> <!-- end pic container -->

<div id="rightdiv">
"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>​

更新しましたが、まだ動作しません: http://jsfiddle.net/FhU3r/15/

4

4 に答える 4

3

まず、境界線は重なっていますが、コンテンツは重なっていないことに注意してください。

float プロパティには、技術的な実装が同じであっても、私が知っている 2 つの概念的に異なる用途があります。1 つ目は要素の周りにコンテンツを流し込むことであり、2 つ目は要素をレイアウト内で隣り合わせにすることです。私が見る限り、あなたは 2 番目のものを探していますが、最初のものを実装しています。

最初に、要素の周りにコンテンツの流れを作りましょう。

記事を公開しているとします。多くの段落のテキストと、本文全体に挿入する画像がいくつかあります。それらは左または右の片側に「浮く」必要があり、段落テキストはそれらの周りを流れる必要があります。また、画像の周りに流れる段落テキストを含むボックスには、画像自体も含める必要があります。それがあなたのコードで見ているものです。

例

そして 2 つ目は、レイアウトのために物を隣り合わせに貼り付けたい場合です。それがあなたの求めているもののようです。

まあ、最初の目的の調整は、2 番目の目的でフロートを使用するのを少し醜くします。経緯は分かりませんが、あえて言えばフロートの仕様は最初の目的で設計されたものだと思います。

基本的に、両方の要素を左にフロートする必要がありますfloat: left;。右側のものは左側のものの周りを流れようとせず、独自の垂直列に存在します。左側のものよりも長い場合でも、左側のものの下に流れるのではなく、列を拡張するだけです.

例

このアプローチの醜い側面の 1 つは、2 つの列の下に不用意に何かを配置できないことです。別の段落を挿入すると、両方の浮動要素がラップされます。

例

したがって、これを修正するにclear: leftは、2 つの左フローティング要素の下に配置したいものを追加する必要があります。

例

これに関する決定的な情報源については、W3C の仕様を確認してください。

この記事は、フロートに関する一般的な問題に対処するための非常に優れた仕事もしています。

于 2012-07-01T05:15:11.673 に答える
3

あなたが何をしようとしているのか理解できたら、 に追加float: leftし#rightdivます。

これにより、段落が画像とキャプションのすぐ横に表示されます。もちろん、親コンテナーに十分な幅がない場合は次の行に折り返されるため、注意が必要です。

于 2012-07-01T04:34:07.683 に答える
1

1 つのフローティング div と別の非フローティング div があるため、フローティング div はドキュメントの通常のフローから除外されます。float:right;に追加することでこれを修正できます#rightdiv。

1 つを左に表示し、もう 1 つを右に表示したい場合 - div の ID からすると、あなたのように聞こえます :) - 次に、それらの幅を手動で設定する必要があります (px、%、em -必要なものは何でも）それらを組み合わせて、包含要素内に水平に収まるようにします。2 つの浮動要素が同じ行に収まらない場合、2 番目の要素は 2 番目の行に「ぶつけられ」ます。

また、これらの div の下にさらにコンテンツがある場合は、次のような方法でフローティング要素を「クリア」する必要があります。

<br style="clear:both" />

これにより、下の要素がフローティング要素と重ならないようになります。これが役立つことを願っています！

于 2012-07-01T04:33:56.787 に答える
0

divをフローティングすると、「フロー」から外れます。つまり、画像の上にdivを「フロート」させたということです。画像をフロートさせると、希望どおりの位置に配置されます。

于 2012-07-01T04:28:03.003 に答える