如何使用 HTML/CSS 在图像周围包装文本

我想设计一个文本块，如下图所示:

enter image description here

质疑这是否可能？

359822 次浏览
小开

你必须把你的图像容器 float如下:

超文本标示语言

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

小开

除了 本德尔的回答: < br/> “ other TEXT”元素应该有 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>

小开

使用 CSS 形状，您可以更进一步，而不仅仅是在矩形图像周围浮动文本。

实际上，您可以将文本包装起来，使其呈现图像边缘的形状或者将其包装起来的多边形。

DEMO FIDDLE (目前正在开发 webkit-犬科动物)

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

小开

如果 图像大小是可变的或设计是 有反应，除了包装的文字，您可以设置一个 段落的最小宽度，以避免它变得太窄。
给出一个不可见的 CSS 伪元素，它具有所需的最小段落宽度。如果没有足够的空间来容纳这个伪元素，那么它将被推到图像下面，连同段落一起。

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

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>

小开

尝试以下代码:

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


提交答案