我的问题是我有一个包含多个段块的页面,高度在2到20行之间。
可以有任意数量的段落,每个段落都有任何高度。
使用HTML5,CSS3,
我最初的目标是将图像添加到左右浮动的这种格式中,文本环绕,这很容易完成。
但是现在,客户希望关于图像基础的段落保持一致,试图举例:
(参见下面的关键字:### =图像空间/形状/内容)
SO: 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 1
text here for paragraph 3 line 2,
etc etc. </p>
...
BUT: 我想要实现的是一种动态的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, line 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 - &gt;我无法找到解决方案,也许我无法简明地描述我的问题,如果有关于这个问题的简明描述,请告诉我!干杯。
答案 0 :(得分:5)
如果您将overflow: auto
添加到p
元素,它们将形成新的块格式化上下文,并且它们的内容将被约束到段落边界框的边缘。
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>
<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>