如何使用彩色文本框在图像周围环绕文本？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用彩色文本框在图像周围环绕文本？相关的知识，希望对你有一定的参考价值。
image of what I am trying to do我试图让图像左边对齐一个彩色文本框，它与图像重叠（偏离中心）。我可以通过使用div class = my text-box“和css（见下文）创建一个div class =”mycontainer“，但我似乎无法弄清楚如何在彩色文本框周围进行文本环绕。包裹图像，但不断向下推动文本框。
.mycontainer
position: relative;
font-family: Arial;
width: 100%;
.mytext-block
position:absolute;
margin-top: 50px;
margin-left: 150px;
background-color:turquoise;
color: black;
padding-left: 10px;
padding-right: 10px;
答案
嗨Rachel这里是一种将图像包裹在图像中的方法，该图像插入到彩色框中。
.mycontainer
position: relative;
font-family: Arial;
width: 100%;
margin: auto;
max-width: 670px;
.mytext-block
width: 300px;
height: 400px;
float: left;
vertical-align: middle;
background-color: turquoise;
color: black;
#image
width: 250px;
height: 100px;
position: relative;
float: left;
left: -190px;
shape-outside: content-box;
margin: 140px -170px 0 0;
#text
font-size: 140%;
padding: 30px;
<div class="mycontainer">
<div class="mytext-block"></div>
<img id="image" src="https://lorempixel.com/300/100/">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque placerat dolor sed dolor euismod hendrerit. Integer eget elit nibh. Vestibulum posuere. Sed elementum bibendum magna, nec tempus augue egestas quis. Pellentesque lacus justo, vehicula vitae nisl sed, semper euismod dui.
</div>
</div>
<!-- Click the "Run code snippet" below to see it. Hope this helps. -->以上是关于如何使用彩色文本框在图像周围环绕文本？的主要内容，如果未能解决你的问题，请参考以下文章