小奶包他干奶奶 2017-03-20 01:19 采纳率: 18.2%
浏览 1478

求教：如何用CSS实现多段落文本三面围绕图片的效果

目标效果如图：
图片说明
HTML代码

 <body>
        <img src="images/test6_11.png"> 
        <div>
            <p>
                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前。
            </p>

             <p>
                端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端
            </p>
            <p>
                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端
            </p> 
        </div> 
    </body>

CSS代码

 <style type="text/css">
            body{
                width:415px;
                border: 2px solid green;
            }
            img{
                float: right;
            }
            div p{
                text-indent: 2em;
                font-size: 16px;
                line-height: 16px;
                font-family: 宋体;
            }
        </style>
  • 写回答

3条回答 默认 最新

  • 斯洛文尼亚旅游 2017-03-20 02:24
    关注
     <style type="text/css">
    body {
        width: 415px;
        border: 2px solid green;
    }

    img {

    }

    div p {
        text-indent: 2em;
        font-size: 16px;
        line-height: 16px;
        font-family: 宋体;
        display:inline
    }
</style>

<body>
    <div>
        <p>
            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前。
        </p><img src="router-switch.jpg" align="right" width="200"> <p>
    端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端前端前端前端前端前前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端端前端
</p> 
        <p>
            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端
        </p>
    </div>
</body>
    评论

报告相同问题？