如何在 CSS 中的 img 周围环绕文本？
[英]How to wrap text around an img in CSS?
问题描述
In HTML I have:
在 HTML 中，我有：
<section>
<h2>Title here</h2>
<article>
<div class = "image">
<img alt = "image title" src = "image location" height = "300" width = "231">
</div>
<h3> text that needs to be wrapped here</h3>
<p> here too</p>
</article>
</section>
How would I code this in CSS to wrap around the image?我将如何在 CSS 中编码以环绕图像？
3 个解决方案
解决方案1
0 2020-09-12 05:50:39
.image{ float:left; width:30%; margin-right:10px; } .image img { display:block; width:100%; height:100px }
<section> <h2>Title here</h2> <article> <div> <div class="image"> <img s src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg" > </div> <div> <h3> text that needs to be wrapped here</h3> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </article> </section>
解决方案2
0 2020-09-12 06:09:14
Float to the rescue浮出水面救人
body { margin: 20px; text-align: center; } img { float: left; margin: 5px; } p { text-align: justify; font-size: 25px; }
<body> <h1>Headline</h1> <div class="square"> <div> <img src="https://via.placeholder.com/150"/> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate ut pharetra sit amet. Dui ut ornare lectus sit amet. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Mattis pellentesque id nibh tortor id aliquet. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Arcu risus quis varius quam quisque. Viverra ipsum nunc aliquet bibendum enim facilisis. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Hendrerit dolor magna eget est lorem ipsum. Hendrerit gravida rutrum quisque non tellus. Mauris sit amet massa vitae tortor condimentum. Nibh ipsum consequat nisl vel. Amet facilisis magna etiam tempor. </p> </div> </body>
解决方案3
0 2020-09-12 08:34:50
Your image needs to float so the text and can wrap around, we are all telling you this.您的图像需要浮动，以便文本可以环绕，我们都在告诉您这一点。
If the text has to wrap around a non-rectangular shape, shape-outside can be used too .如果文本必须环绕非矩形形状，也可以使用shape-outside 。
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.
Example with a rounded image带有圆形图像的示例
div.image img { float: left; border-radius: 50%; shape-outside: ellipse(160px 100px); border:solid; } h3,p {margin:0;}
<section> <h2>Title here</h2> <article> <div class="image"> <img alt=" title" src="http://dummyimage.com/300x200/e3de88&text=shape-outside"> </div> <h3> text that needs to be wrapped here</h3> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> </article> </section>
Here is some other example where the text can be layed inside fancy & complexe shapes: https://css-challenges.com/custom-text-shape/ & the pen that goes along https://codepen.io/t_afif/pen/eYpeOXB这是一些其他示例，其中文本可以放置在花哨和复杂的形状中： https ://css-challenges.com/custom-text-shape/ 和随附的笔https://codepen.io/t_afif/pen /eYpeOXB
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.