Question

我正在创建一个页面，其中包含一个图像，旁边有几个文本块。我不希望文本块包装，因为这看起来很糟糕。但我也不想添加“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。我不知道图像的大小或段落的长度。

Answer 1

这是更新 - 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>

CSS：如果块溢出，则强制块出现在浮点块下面

1 个答案: