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