Making the text surround the picture

来源：互联网发布：java 线程池使用编辑：程序博客网时间：2024/06/15 18:49

这里写图片描述

In this example,it uses the ‘float’ attribute to achieve it;
The float element will on the top of the element that doesn’t float,the tow element will overlap

<!DOCTYPE HTML ><html><head>    <title>Title</title>    <style>        .con{            width: 400px;            height: 400px;            border: 1px solid black;            margin: 100px auto;        }        .pic{            width: 64px;            height: 64px;            float: left;            margin: 0 5px 5px 0;        }        .par{            background-color: green;            width: 400px;            height: 200px;            text-indent: 32px;            /*when the text's length exceed the length of parent container,            the following two lines will make it wraps automatically*/            word-wrap: break-word;            word-break: break-all;            text-align: left;        }    </style></head><body><div class="con">    <div class="pic"><img src="../images/01.png"></div>    <div class="par">kufweibqbgi3ubhbbbbbbbbbbbbbbbbbb        bbbbbbbbbbbbbbbbkkkkkkkkkkkkkkkkkk        bbbbbbbbbbbbbbbbkkkkkkkkkkkkkkkkkk        bbbbbbbbbbbbbbbbkkkkkkkkkkkkkkkkkk        bbbbbbbbbbbbbbbbkkkkkkkkkkkkkkkkkk        bbbbbbbbbbbbbbbbkkkkkkkkkkkkkkkkkk        iiiiiiiiiiiiiiiiiiiiiiiiibbbbbbbbbbbbbbbbkkkkkkkkkkktttttttttttkkkkkkk    </div></div></body></html>

阅读全文

1 0