How to Wrap Text Around Irregular Images Using CSS and Divs?-CSS Tutorial-php.cn

How to Wrap Text Around Irregular Images Using CSS and Divs?

Linda Hamilton

Release： 2024-12-20 10:03:11

Original

1000 people have browsed it

How to Wrap Text Around Irregular Images Using CSS and Divs?

How to Wrap Text Around Non-Rectangular Images?

Customizing text flow to wrap around irregular borders can enhance the visual appeal of your website or application. This article explores a method proposed by Tory Lawson in his 2011 blog post, "Wrapping text around non-rectangular shapes."

Step 1: Define the Wrap Area

Using an image editing program, determine the desired text boundary by drawing a bounding line that represents where the text should end.

Step 2: Create a List

Measure the width of the wrap area at regular intervals (e.g., every 10 pixels). Record these values to serve as the widths of the spacer divs.

Step 3: Implement the Markup and CSS

Markup:

<body>
  <div>

Copy after login

CSS:

#wrapper { 
   width:634px;
   height:428px;
   display:block;
   background-image:url("headshot.jpg");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

Copy after login

This technique floats divs to block off the shape's area, allowing the text to wrap around the non-rectangular image while maintaining a consistent distance from its borders.

Conclusion

Wrapping text around non-rectangular images requires a custom approach. While there is no direct CSS solution, the method described in this article can effectively achieve the desired effect.

The above is the detailed content of How to Wrap Text Around Irregular Images Using CSS and Divs?. For more information, please follow other related articles on the PHP Chinese website!