gpt4 book ai didi

css-float - CSS:如果 block 溢出,则强制 block 出现在 float block 下

转载 作者:太空宇宙 更新时间:2023-11-03 18:46:49 25 4
gpt4 key购买 nike

我正在创建一个页面,其中包含一张图片,旁边有几个文本 block 。我不希望文本 block 换行,因为那样看起来很糟糕。但我也不想添加“溢出:隐藏”,因为这看起来很糟糕(具体来说,文本 block 的末尾卡在图像后面)。

我想做的,但我不知道怎么做,是强制 block 在 float 元素下呈现,如果它会溢出。这样文本 block 就会保持在一起(不像允许溢出)并且它不会卡在最后很有趣(比如“溢出:隐藏”)。

这里有一些 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>

有什么办法可以解决这个问题吗?也许我不应该使用 float ?

另外:我正在制作一个通用的 CSS。我不知道图像有多大或段落有多长。

最佳答案

这是更新 -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-float - CSS:如果 block 溢出,则强制 block 出现在 float block 下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16180908/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com