如何在 CSS 中的 img 周围环绕文本？

Question

在 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>

我将如何在 CSS 中编码以环绕图像？

Answer 1

 .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>

Answer 2

浮出水面救人

 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>

Answer 3

您的图像需要浮动，以便文本可以环绕，我们都在告诉您这一点。

如果文本必须环绕非矩形形状，也可以使用shape-outside 。

shape-outside CSS 属性定义了一个形状——它可能是非矩形的——相邻的内联内容应该环绕在它周围。 默认情况下，内联内容环绕其边距框； shape-outside 提供了一种自定义这种环绕方式的方法，可以让文本环绕复杂的对象而不是简单的框。

带有圆形图像的示例

 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>

这是一些其他示例，其中文本可以放置在花哨和复杂的形状中： https ://css-challenges.com/custom-text-shape/ 和随附的笔https://codepen.io/t_afif/pen /eYpeOXB

如何在 CSS 中的 img 周围环绕文本？

问题描述

3 个解决方案

解决方案1
0 2020-09-12 05:50:39

解决方案2
0 2020-09-12 06:09:14

解决方案3
0 2020-09-12 08:34:50

如何在 CSS 中的 img 周围环绕文本？

问题描述

3 个解决方案

解决方案1 0 2020-09-12 05:50:39

解决方案2 0 2020-09-12 06:09:14

解决方案3 0 2020-09-12 08:34:50

解决方案1
0 2020-09-12 05:50:39

解决方案2
0 2020-09-12 06:09:14

解决方案3
0 2020-09-12 08:34:50