html – CSS是否可以阻止文本块块环绕浮动块?

html – CSS是否可以阻止文本块块环绕浮动块?,第1张

概述我的问题是我有一个包含多个段块的页面,高度在2到20行之间. 可以有任意数量的段落,每个段落都有任何高度. 使用HTML5,CSS3, 我最初的目标是将图像添加到左右浮动的这种格式中,文本环绕,这很容易完成. 但是现在,客户希望关于图像基础的段落保持一致,试图举例: (参见下面的键:### =图像空间/形状/内容) 所以: HAPPENS是什么: ####### <p>text text here 我的问题是我有一个包含多个段块的页面,高度在2到20行之间.

可以有任意数量的段落,每个段落都有任何高度.

使用HTML5,CSS3,

我最初的目标是将图像添加到左右浮动的这种格式中,文本环绕,这很容易完成.

但是现在,客户希望关于图像基础的段落保持一致,试图举例:

(参见下面的键:### =图像空间/形状/内容)

所以:
HAPPENS是什么:

####### <p>text text here for this paragraph###I### text here for this paragraph line 2###M### text here for this paragraph line 3</p>###A### ###G### <p>text here for paragraph 2###E### text here for paragraph 2,line 2,etc</p>####### ####### <p>text here for paragraph 3 line 1text here for paragraph 3 line 2,etc etc. </p>...

但:
我想要实现的是一种动态的CSS方式:

####### <p>text text here for this paragraph###I### text here for this paragraph line 2###M### text here for this paragraph line 3</p>###A### ###G### <p>text here for paragraph 2###E### text here for paragraph 2,etc</p>####### ####### <p>text here for paragraph 3 line 1        text here for paragraph 3 line 2,etc etc.</p><p>text here for Paragraph 4 states not indented to make room text for the image floated left. text.text text text text</p>....

因为第3段中的P标签在图像仍然存在时开始,所以段落的整个部分应该缩进,是否有相当动态的方法来实现这一点?

如果我在CSS中为段落标记应用任何缩进规则,它们也会缩进段落4中没有左侧图像的段落.

如果我将段落标记内联块作为SO的另一个类似问题的解决方案,那么整个段落都不会出现,直到图像之后,打破了页面流.

如果我不浮动图像,最好的内联方式是什么?我无法保证页面上的图像数量.

我不能在图像元素的底部添加填充或边距等空格,因为我不知道段落会持续多长时间.

进一步澄清:我的图像目前浮动,并且工作完美.

免责声明:我有点累.晚了.但我想如果这个问题有一个简单的答案,它可能对其他人和我自己都有用,并且可以节省我明天早上挖掘的时间……

PS – >我无法找到解决方案,也许我无法简明地描述我的问题,如果有关于这个问题的简明描述,请告诉我!干杯.

解决方法 如果向p元素添加overflow:auto,它们将形成新的块格式化上下文,并且它们的内容将被约束到段落边界框的边缘.

img {  float: left;}p {  wIDth: 170px;  overflow: auto;  }
<img src="http://placehold.it/100x180"> <p>text here for paragraph 3 line 1    text here for paragraph 3 line 2,etc etc. </p> <p>text here for paragraph 3 line 1    text here for paragraph 3 line 2,etc etc. </p>
总结

以上是内存溢出为你收集整理的html – CSS是否可以阻止文本块块环绕浮动块?全部内容,希望文章能够帮你解决html – CSS是否可以阻止文本块块环绕浮动块?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1069808.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存