Home > Web Front-end > CSS Tutorial > How to Position an Image Left of Text Without Wrapping Using CSS Floats?

How to Position an Image Left of Text Without Wrapping Using CSS Floats?

DDD
Release: 2024-11-17 19:57:02
Original
487 people have browsed it

How to Position an Image Left of Text Without Wrapping Using CSS Floats?

Using CSS Floats to Position an Image Left of Text

When designing a web page, you may encounter situations where you want an image to appear to the left of the text, without it wrapping around the text. Using CSS floats provides a solution for this.

HTML

In your provided HTML, there are three essential elements:

  • .post-container: Contains the overall post box.
  • .post-thumb: Contains the image you want to float left.
  • .post-content: Holds the post title and description.

1

2

3

4

5

<div class="post-container">

    <div class="post-thumb"><img src="thumb.jpg" /></div>

    <div class="post-title">Post title</div>

    <div class="post-content"><p>post description...</p></div>

</div>

Copy after login

CSS

To achieve the desired layout, apply the following CSS properties:

  • .post-container: Set overflow: auto to allow the content inside to extend beyond the container's boundaries.
  • .post-thumb: Set float: left to float the image to the left.
  • .post-thumb img: Set display: block to ensure the image displays in its own space.
  • .post-content: Set a margin-left value greater than the image width (e.g., 210px) to position the text to the right of the image.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.post-container {

    overflow: auto;

}

 

.post-thumb {

    float: left;

}

 

.post-thumb img {

    display: block;

}

 

.post-content {

    margin-left: 210px;

}

Copy after login

Important Notes

  • To avoid the image from wrapping around the text, ensure the margin-left value for .post-content is wider than the image width.
  • If you desire a header at the top of the post box, consider using a

    tag within .post-content.

The above is the detailed content of How to Position an Image Left of Text Without Wrapping Using CSS Floats?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template