如何使用HTML/CSS环绕图片并排版文字

Question

我想设计一个像下面图片一样的文本块：

这是否可行？

- user1780343

---

可能是围绕带缩进和对齐的图像换行文本的重复问题。 - mavrosxristoforos

你是否正在尝试像在常规的<p>标签中一样将文本环绕在图像周围，但你也提到了<textarea>，这可能是完全不同的问题。如果你有HTML代码，为什么不把它发布出来呢？谢谢。 - Marc Audet

是的，你只需要将 PHP 图像向左浮动，文本就会围绕它自动换行 :-) - Jack

Answer 1

你需要将图片容器设置为 float，如下所示：

HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

CSS（层叠样式表）

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

小提琴

http://jsfiddle.net/kYDgL/

- BeNdErR

Answer 2

使用 CSS Shapes，你可以比仅仅在矩形图像周围浮动文本更进一步。

实际上，你可以将文本包裹在图像或多边形的边缘上，使之呈现出相应的形状。

演示代码（目前只在 Webkit 上可用 - caniuse）

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

此外，这里有一篇关于CSS Shapes的好文章list apart article。

- Danield

---

有没有办法将对象“AROUND”包裹起来，使对象可以处于中间位置？ - redestructa

@redestructa 看看CSS排除。请看我的帖子：https://dev59.com/YWIj5IYBdhLWcg3w6JA9#19895616 目前仅在IE中支持-http://caniuse.com/#feat=css-exclusions - Danield

Answer 3

< p > 除了< strong > BeNdErR 的回答之外：
"其它文本"元素应该设置为float:none，如下所示：

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> 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  </div>
    </div>

- T.Todua

---

这是我能让它正常工作的唯一方法，也是最干净的解决方案。 - andygoestohollywood

float:none救了我！一直试图将第二个元素float:right，但无济于事。 - bkunzi01

Answer 4

如果图片大小可变或设计具有响应式特性，除了包装文本之外，您还可以为段落设置最小宽度，以避免其变得过窄。
使用所需的最小段落宽度给出一个不可见的CSS伪元素。如果没有足够的空间容纳这个伪元素，那么它将被推到图片下面，带着段落一起移动。

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

- Jithin B

---

我认为你的答案可能会帮我解决问题。在响应式设计中，我遇到了左浮动图像堆叠的问题。由于我的默认图像宽度为30％，并且两侧都有图像，有时文本列只有4个字符宽。 - Sherwood Botsford

Answer 5

2022年更新

我试图用最少的代码实现这种结果。以下是对我有效的方法。

#wrap {
    margin: 3em 8em;
}
.left {
    float: left;
    margin-right: 1.5em;
}
.right {
    float: right;
    margin-left: 1em;
}
p {
    margin-bottom: 2.5em;
    overflow: hidden; /* this is what keep the <p> from wrapping */
}
p:last-child {
    overflow: visible; /* this is an example of the browser default */
}

<div id="wrap">
<img class="left" src="http://dummyimage.com/172x172/0088cc/ffffff.gif&amp;text=.img">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
<img
class="right" src="http://dummyimage.com/172x172/0088cc/ffffff.gif&amp;text=.img">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
<img
class="right" src="http://dummyimage.com/172x172/0088cc/ffffff.gif&amp;text=.img">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>

- Grogu

---

兄弟，直接用 flexbox 就行了。 - Yuriy Kravets

@YuriyKravets：就我个人而言，我认为flexbox并不是非常灵活。这个名字的讽刺之处在于，你无法在一个flex周围操纵。 - Grogu

@Grogu，我如何将第三个“.img”放在右下角，而文字仍围绕它浮动？我似乎无法实现这一点。谢谢。 - Le_Buzz

Answer 6

尝试以下代码：

        .my-image{
            width: -webkit-fill-available;
            padding-top: 10px;
            padding-left: 6px;
            padding-right: 6px;
        }
        

    <div style="width:100%;">
        <div style="float: right;width: 40%;">
            <img class='my-image' src="https://via.placeholder.com/150/92c952">
        </div>
        <div style="float:none; background:yellow;"> 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   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   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  </div>
        <div style="float:none; background:green;"> 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   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   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  </div>
        <div style="float:none; background:blue;"> 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   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   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  </div>
        <div style="float:none; background:red;"> 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   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   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  </div>
        <div style="float:none; background:green;"> 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   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   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  </div>
        <div style="float:none; background:blue;"> 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   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   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  </div>
        <div style="float:none; background:red;"> 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   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   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  </div>
        <div style="float:none; background:green;"> 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   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   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  </div>
        <div style="float:none; background:blue;"> 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   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   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  </div>
        <div style="float:none; background:red;"> 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   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   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  </div>
        <div style="float:none; background:green;"> 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   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   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  </div>
        <div style="float:none; background:blue;"> 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   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   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  </div>
    </div>

- Adrian Gh.