Stop text from wrapping around image

Question

I want to stop text from wrapping around image. Is there any way to do this without using margin?

相关标签:

Answer 1

Put your img in a wrapper DIV and clear that

CSS:

.wrapper{
    clear:both;
}

HTML:

<div class='wrapper'><img src='..'></div>
text here. text here...

Here's the JsFiddle

Or, simply remove all CSS and put "<br>" after the image:

<img src="..."><br>

JsFiddle here

Answer 2

Using html enter the following code:

<br clear="left">

This works for me using multiple WordPress sites.

-Callahan-

Answer 3

Using a WordPress plugin

Insert [clearboth] in the Text editor (won't be removed by the Visual editor) with:

1. ClearBoth plugin or
2. Simple Breaks plugin.

Answer 4

You'll have to wrap your text in its own container.

Since your <img> is floated to the left, you can use overflow: hidden on your newly-added container to achieve no wrapping of the text.

However block elements shouldn't be descendants of <strong> elements, you may want to rethink this tag.

img {
    width:100px;
    height:67px;
    float:left;
}
div {
    overflow:hidden;
}

<article>
    <img src="https://www.google.com/images/srpr/logo11w.png" />
    <div>
        Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
        Text here. Text here.Text here. Text here.Text here. Text here.
        Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
        Text here. Text here.Text here. Text here.Text here. Text here.
    </div>
</article>

JSFiddle

Answer 5

As a general rule here are some best practices to improve your css and html skills:

1) Always separate images and texts in the corresponding tags: <img src=""> for images and <p> or <div> or <span> for texts.

2) As a general rule, separate your content (html) and your style (css) as much as possible.

3) To understand how CSS works you have to learn the box model. Here is an excellent article to get you going: http://css-tricks.com/the-css-box-model/

This box model will help you with your problem.