篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 在图像周围环绕文本 - HTML / CSS相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://www.brett-munro.com - Wrapping text around an image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Gray background color */
body {
background:#cccccc;
}
/* White box */
#container {
margin:auto;
padding:20px;
width:900px;
background:#ffffff;
}
/* Image floated right */
#container img {
float:right;
}
</style>
</head>
<body>
<div id="container">
<img src="http://img684.imageshack.us/img684/7173/networktransmitreceive.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt, sapien ut ultrices facilisis, velit enim tempor leo, id vestibulum mi diam quis velit. Maecenas viverra dapibus malesuada. Proin sit amet libero eros, nec dapibus justo. Praesent turpis sapien, vulputate at accumsan eu, congue accumsan ligula. Sed egestas nunc vitae nulla consectetur lobortis. In hac habitasse platea dictumst. Quisque aliquam consectetur metus, nec sodales est lobortis eu. Phasellus dignissim cursus libero accumsan cursus. Integer elit metus, fermentum in scelerisque nec, fermentum ut risus. Mauris tincidunt convallis tempor. Nullam ornare libero neque. Aenean sollicitudin egestas dapibus. Vivamus tempor sagittis tincidunt. Pellentesque volutpat lacinia elit et venenatis. Sed gravida rhoncus libero, id consequat quam consectetur id. Curabitur pharetra sapien sit amet sem accumsan pharetra. Ut commodo est non urna interdum euismod. Quisque posuere eleifend ligula, sit amet ornare mauris tempus ut. Mauris nunc mi, porttitor non semper ut, porta sit amet justo. Donec a orci tellus.</p>
<p>Suspendisse pellentesque nunc eu neque aliquam et semper libero ullamcorper. Fusce faucibus ullamcorper urna, a consequat tellus viverra id. Curabitur massa quam, malesuada in elementum id, porta in nisl. Suspendisse nec turpis urna, eget facilisis elit. Cras at massa nec ligula blandit ultricies. Nullam vel feugiat massa. Nullam blandit, mauris ut mattis aliquet, libero tellus malesuada risus, ac malesuada turpis est ac ipsum. Mauris vestibulum iaculis facilisis. Morbi orci lectus, venenatis ac pretium ac, imperdiet a mi. Ut purus turpis, porta id suscipit at, dictum ut nisi. Vivamus a mauris in orci aliquam laoreet blandit sit amet dolor. Cras hendrerit interdum fermentum. Quisque consectetur, enim et vulputate dictum, erat tellus tincidunt orci, accumsan faucibus enim velit nec diam. Pellentesque tincidunt massa vel justo fringilla nec auctor nulla auctor. Aliquam molestie gravida lorem, sit amet lobortis odio ultricies ac.</p>
<p>For more HTML/CSS tutorials visit my <a href="http://www.brett-munro.com">web design homepage</a>, or check my <a href="http://www.youtube.com/MrBrettMunro">youtube channel</a>.</p>
</div>
</body>
</html>
如何使用彩色文本框在图像周围环绕文本？
image of what I am trying to do我试图让图像左边对齐一个彩色文本框，它与图像重叠（偏离中心）。我可以通过使用div class = my text-box“和css（见下文）创建一个div class =”mycontainer“，但我似乎无法弄清楚如何在彩色文本框周围进行文本环绕。包裹图像，但不断向下推动文本框。
<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. -->
以上是关于HTML 在图像周围环绕文本 - HTML / CSS的主要内容，如果未能解决你的问题，请参考以下文章