1

実行時に、見出し段落クラスと、「本文」テキストをその画像に対して浮き上がらせる画像クラスを含む定義済みの div があります。問題は次のとおりです。「本文」テキストが画像を通過するほど長くない場合、div の次のインスタンスが画像に対して浮かんでいる間に開始されます。div クラスの新しいインスタンスごとに強制的に以前のフロートをクリアし、独自に開始してコンテナーに対してフラッシュする方法を探しています。

CSS:

.textChunk {
font-family: 'Special Elite', cursive;
font-size:20px;
display:block;
float:none;
}

.leftPic {
max-width:25%;
max-height:25%;
margin-right:10px;
float:left;
}

.rightPic {
max-width:25%;
max-height:25%;
margin-left:10px;
float:right;
}

HTML:

<div class="textChunk">
    <img class="leftPic" src="images/img1.png">
    <p>Lorem ipsum dolor.</p>
</div><br />
<div class="textChunk">
    <img class="leftPic" src="images/img2.png">
    <p>Lorem ipsum dolor.</p>
</div><br />
<div class="textChunk">
    <img class="leftPic" src="images/img3.png">
    <p>Lorem ipsum dolor.</p>
</div>

また、画像の下に回り込まないように、テキストが画像の下部を通過した後でも、画像に対して本文テキストを流し、画像の境界線に押し付け続ける方法はありますか?

4

2 に答える 2

0

clear:bothすべての新しいインスタンスが新しく開始されるように使用します。これを参照してください：http://jsfiddle.net/itz2k13/YGD6t/

.textChunk {
 font-family: 'Special Elite', cursive;
 font-size:20px;
 display:block;
 clear:both;
}
于 2013-06-08T17:34:57.387 に答える
0

width:100%;および/またはdivに適用clear:both;します。.textChunkClear both は、両側のフロートからクリアすることを意味します。.textChunkdiv の幅が 100% の場合、フロートの問題は発生しません。

于 2013-06-08T17:36:08.160 に答える