1

隣にいくつかのテキストブロックがある画像を含むページを作成しています。見栄えが悪いため、テキストのブロックを折り返すことは望ましくありません。しかし、「overflow: hidden」も追加したくありません。これは見栄えが悪いためです (具体的には、テキスト ブロックの最後が画像からはみ出してしまいます)。

私がやりたいことは、方法がわかりませんが、ブロックがオーバーフローした場合に浮動要素の下で強制的にレンダリングすることです。そうすれば、テキストのブロックは一緒に残ります (オーバーフローを許可するのとは異なります)。

ここに私の問題を示すためのhtmlがあります。

<head>
<style>
.imgclass {background-color:336633;width:100px;color:00000;float:left}
p {overflow:hidden;width:100px}
</style> 
</head>

<div class="imgclass">Pretend there is an image here. Pretend there is an image 
here. Pretend there is an image here. Pretend there is an image here. Pretend 
there is an image here.
</div>

<p>
This is a paragraph.  It looks good next to the pretend image.
</p>

<p>   
This is a paragraph.  It hangs off the pretend image and looks bad.  I wish that 
if the paragraph was too long it would appear under the image.
</p>

この問題を解決する方法はありますか? おそらく、フロートを使用するべきではありませんか？

また：私は一般的なcssを作っています。画像の大きさや段落の長さはわかりません。

4

1 に答える 1

0

これが更新です-css

.imgclass {background-color:336633;width:100px;color:00000;float:left}
p {
    width:100%;
}
.long{
    clear: left;
}

html

<div class="imgclass">Pretend there is an image here. Pretend there is an image 
here. Pretend there is an image here. Pretend there is an image here. Pretend 
there is an image here.
</div>

<p>
This is a paragraph.  It looks good next to the pretend image.
</p>

<p class="long">   
This is a paragraph.  It hangs off the pretend image and looks bad.  I wish that 
if the paragraph was too long it would appear under the image.
</p>
于 2013-06-25T11:21:48.930 に答える