Home > Article > Web Front-end > How to use CSS to achieve mixed arrangement of images and text, and the effect of squeezing images into text? ? _html/css_WEB-ITnose
How to use CSS to achieve mixed arrangement of images and text, and the effect of squeezing images into text? ? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:21:511837browse
Similar to the mixed arrangement of pictures and text in Word, the text surrounds the picture from top to bottom, left and right. The size and position of the picture are variable. It is best not to use tables to force positioning.
Similar to floating left and right, what you want to achieve is the effect of floating in place, so that the text can surround the image left and right.
Please enlighten me. It's better to give sample code.
Reply to the discussion (solution)
Isn’t it enough to set the img to float? I don't know if this is the effect you want.
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin:0; padding:0;} .container{ width:100%; height:900px; float:left; line-height:20px;} .container img{ float:left;} </style> </head> <body><div class="container"> 发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法<img src="image/黄.jpg">倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨发大水法倒萨</div> </body></html> @u010480479’s reply:
Hello, I don’t want to float left or right. Do I need to float only without moving left or right, float in place, or float before position in the stream.
For example, if the normal line height is 1em, and the image is 4em high, after drawing in the normal flow, the line frame of the line where the image is located will be stretched by the image and become 4em.
The effect I want is that the image spans 4 lines, and the surrounding text just wraps around it, and the image position is still the position before floating.
Because the image has its original size and is generally expressed in px, the image height may be exactly 2.5em, so there will definitely be stretched line boxes. I want them to be stretched as small as possible.
Thank you.
Some people say that it cannot be implemented with CSS. If it is true, what is the reason? ?
CSS is more about the overall layout and small details. It is more practical to use tags in html.
Let’s wait and see if there are any other explanations.
Generally, there are more floats, and there is no such css attribute around it. .