Image text wrap not working properly on frontend

admin管理员组

文章数量:1332873

I've been tearing my hair out trying to get this fixed. I can't figure out what's going wrong. It looks fine in the Visual Editor (though I usually use the text version instead - and NEVER use Gutenburg (so this is referencing the Classic Editor).

Images aligned left or right just do not properly wrap the text. I have added the following CSS to my stylesheet, and it makes no difference.

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

It wraps only with the paragraph it was added next to. But subsequent paragraphs do not continue the wrap. They start below the image, as seen in this screenshot:

Can anyone help me here?

I've been tearing my hair out trying to get this fixed. I can't figure out what's going wrong. It looks fine in the Visual Editor (though I usually use the text version instead - and NEVER use Gutenburg (so this is referencing the Classic Editor).

Images aligned left or right just do not properly wrap the text. I have added the following CSS to my stylesheet, and it makes no difference.

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

It wraps only with the paragraph it was added next to. But subsequent paragraphs do not continue the wrap. They start below the image, as seen in this screenshot:

Can anyone help me here?

• images

Share Improve this question asked Jun 25, 2020 at 18:00 Laura SageLaura Sage 22555 silver badges1111 bronze badges 5

• Your issue may be with the paragraph css. Can you share a link? – Michelle Commented Jun 25, 2020 at 18:10
• Unfortunately I cannot. But this is the css for p p { margin-top: 0; margin-bottom: 1rem; } – Laura Sage Commented Jun 25, 2020 at 20:17
• We just need more context. I've reproduced your code in a CodePen here and it works: codepen.io/friendlywp/pen/abdwMew – Michelle Commented Jun 25, 2020 at 21:53
• Is it possible to provide a link via PM? I don't actually know how to do that here. – Laura Sage Commented Jun 25, 2020 at 22:07
• Ok, it doesn't appear that it's possible to send a PM or do a private comment, so I'll post the dev link to the particular page in question: [link]reason4rhymes.themedev.thepixelpixie/welcome-to-my-blog/[/… – Laura Sage Commented Jun 26, 2020 at 13:31

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Your container div for the content area has a class of .row, which is set to display:flex in Bootstrap. Direct children of a parent with display:flex can't be floated.

To fix this you'll either need to update the .row class so it's not set to display:flex (display:block works for me), or add an interior wrapper div so that the image and paragraphs not direct children of the .row div.

本文标签： Image text wrap not working properly on frontend