CSS Is it possible to stop blocking blocks of text around a floating block?

My problem is that I have a page with numerous paragraph fragments, between 2 and 20 lines high.

There can be any number of paragraphs, each of which has any height.

Using HTML5, CSS3,

My initial goal was to add images in this format, floating left and right, with text wrapped around, this was easily done.

But now the client wants THAT WRAP paragraphs about the IMAGE BASE to be queued up to try:

(link below: ### = image space / shape / content)

SO: What is 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: What I want to achieve is a dynamic CSS way:

####### <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>

....

      

Since the P tag in paragraph 3 starts while the image is still present, the entire paragraph must be indented, is there a fairly dynamic way to achieve this?

If I apply any CSS indentation rules for paragraph tags, they will also be paragraphs of the paragraph, like paragraph 4, that do not have a left side image.

If I create a Paragraph inline-Block tag, which I read as a solution for another similar problem in SO, then all paragraphs won't appear until the image is broken.

If I am not floating the image, what is the best way to insert it? I do not guarantee the number of images per page.

I am unable to add spaces such as padding or margins to the bottom of the image's shape element because I have no idea how long the paragraphs will last.

FURTHER CLARIFICATION: my images are currently floating and working fine.

Disclaimer: I'm a little tired. It's late. But I figured if this question had an easy answer, it might be useful to others, like me, and save me hours of digging tomorrow morning ...

PS -> My inability to find a solution, maybe my inability to briefly describe my problem, if there is a short description of this problem let me know! Greetings.

+3


source to share


1 answer


If you add elements overflow: auto

to elements p

, they will form new block formatting contexts, and their content will be delimited by the edges of the paragraph bounding box.



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>
      

Run codeHide result


+4


source







All Articles