CSS simulates float to achieve the effect of center text surrounding the image on the left and right

What is text wrapping around images? This is the effect of the following figure:

The CSS code of the effect can be viewed here

In CSS, there is no such setting as float: center, but we can simulate a similar effect through some tricks.

Friends often ask: There are float: left and right, why is there no float: center? My answer is:

1. text-align: center can already achieve the centering effect of inline elements

2. Make the text wrap around both sides of the image in one line. This effect is very difficult for the browser to handle. Unless you display the text as two columns, but that's another question

3. When it comes to text, float should actually be called wrapping. Float:left means "place this element on the left side of the container and wrap everything to the right around it." In this case, the float:center we are discussing is actually wrapping on both sides, which brings up a series of problems, such as how to determine the "depth" of an element in a container?

In order to simulate the effect of float: center, we divide the text into two columns by creating two divs, and the centered image is written in the first div:

<div id="container">
  <div id="leftcol">
    <p><img src=".../01.jpg">Kyoto is located near the center of Honshu Island. Before the royal family moved to Edo...
  </div>
  <div id="rightcol">
    <p>As a result, many of Kyoto's preserved sites are UNESCO World Heritage Sites, including...
  </div>
</div>

First, we set the two div elements, .leftcol and .rightcol, to display: table-cell, and the container .container element to display: table:

div#container { 
  display: table; 
  width: 80%;
  max-width: 900px; /* Maximum container width 900px */
  margin: 0 auto;
  line-height: 1.5;
}
div#leftcol, div#rightcol { 
  display: table-cell; 
  padding: 1em;
}
div#container img {
  width: 55%; /* The width of the image is 55% of the width of the first column div */
  height: auto;
}

In this way, the text is displayed as two columns of the table:

The image will appear as it should, at the top left of the first column, with its bottom aligned to the baseline of the first line of text.

Next, if you give the image a float:right, it will float to the right of the first div, and the text will wrap around the left side of the image:

So far, we have implemented the most traditional layout: two columns of text, one of which contains a floating image.

Next, we need to use some techniques to achieve the effect of text wrapping around left and right.

The first step is to move the image to the right by a certain distance by setting the margin-right property to a negative value:

div#container img {
  float: right;
  width: 55%;
  height: auto;
  margin-right: -20%; /* The image moves to the right by 20% of the first div's width*/
  margin-left: 20px;
  margin-bottom: 20px;
}

The margin-left and margin-bottom properties set the image to have a 20px spacing with the text on the left and below.

At this time, the picture will overlap with the text in the second column:

The second step is to generate an element in the second div through the :before pseudo-element. It does not contain any content and is only used to allow the text to wrap around it after floating.

div#rightcol:before { 
  content: " "; 
  float: left; 
  width: 25%;
  padding-top: 102%;
}

This pseudo-element is set to float left, and its width plus the distance the image is shifted to the right is exactly the width of the image.

The padding-top property is set slightly larger so that there is some space between the text and the image.

If we add a red border to this pseudo-element with no content, we can see its position:

The actual function of this empty pseudo-element is to separate the text that overlaps with the image and make them wrap around, thus simulating the effect of the text on the right wrapping around the image, but in fact the text wraps around the pseudo-element.

This wrapping method has a limitation, that is, the image must be at the top of the div, and we cannot place the image arbitrarily in the vertical direction.

Finally, set some beautifying styles and adaptive codes, and the final effect is achieved:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.