Making the text surround the picture

最新推荐文章于 2024-07-25 12:15:00 发布

Davenny

最新推荐文章于 2024-07-25 12:15:00 发布

阅读量342

点赞数 1

分类专栏： html5 文章标签： html

本文链接：https://blog.csdn.net/Davenny/article/details/78170764

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里写图片描述

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>

Davenny

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Making the text surround the picture

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 PUBLIC "-//W3C//DTD HTML 4.0
复制链接

扫一扫

专栏目录