Stop text from wrapping around image

问题:

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

HTML:

<strong><img style="float: left;" src="https://www.google.com/images/srpr/logo11w.png" width="100" height="67" />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.

Here is what I have currently:

img{
    margin-bottom: 2.5em;
}

JSFiddle Demo

回答1:

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

回答2:

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

回答3:

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.

回答4:

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.