How to Prevent Text from Wrapping Around Floating Images in CSS?-CSS Tutorial-php.cn

How to Prevent Text from Wrapping Around Floating Images in CSS?

Mary-Kate Olsen

Release： 2024-11-22 09:15:13

Original

420 people have browsed it

How to Prevent Text from Wrapping Around Floating Images in CSS?

Floating Images and Text in CSS

You desire a layout where thumbnails float to the left of text, while preventing text wrapping around the images. Here's how you can achieve this:

HTML Structure:

<div class="post-container">                
    <div class="post-thumb"><img src="thumb.jpg" /></div>
    <div class="post-content">
        <div class="post-title">Post title</div>
        <p>Post description...</p>
   </div>
</div>

Copy after login

CSS Styling:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    display: flex; /* Create a flexible layout container */
}
.post-thumb {
    float: left;
    margin-right: 20px; /* Create some spacing between the thumbnail and text */
}
.post-thumb img {
    display: block;
}
.post-content {
    margin-left: auto; /* Push the text to the right side of the container */
}
.post-title {
    font-weight: bold;
    font-size: 200%;
}

Copy after login

By using CSS's display: flex, we create a flexible container that allows the post-thumb and post-content elements to expand and shrink as needed. The float: left on the post-thumb and the margin-left: auto on the post-content help position the elements as desired.

The above is the detailed content of How to Prevent Text from Wrapping Around Floating Images in CSS?. For more information, please follow other related articles on the PHP Chinese website!