css-tips/image-text-wrap.html at master · vanzheng/css-tips · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>文字环绕图片布局</title>
    <style type="text/css">
    .container {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        padding: 20px;
        display: inline-block;
    }
    .container img{
        float: left;
    }
    .container p{
        margin: 0;
        padding: 0;
        line-height: 1.5em;
        background-color: Silver;
    }
    </style>
</head>

<body>
    <h2>文字环绕图片布局</h2>
    <div class="container">
        <img src="images/mm1.jpg" />
        <p>日常保养方面，传统保养品虽然见效不如整形明显，却一样能带来改善。现代都市人长期处于身体循环不畅的状态中，脸型也自然浮肿圆润，适当的按摩能帮助促进血液流动，将浮肿的线条收紧。在不少V脸精华中有添加了弹力紧致素，虽然作用时间有限，但也确实能在当下提拉紧实面部线条，让你实在的感受到逆重力的拉扯感。 塌陷、老化的肌肤也会影响V脸的紧实度，除了借助保养品，家用的美容器械也能帮上忙。利用真空按摩仪刺激微循环，轻柔提拉并深度按摩肌肤，促进血液流动，为表层肌肤输送氧气和营养，焕发肌肤活力，去激胶原蛋白和弹性蛋白的产生，紧致松垮轮廓。
        </p>
    </div>
</body>

</html>