首页手记实现段落首字下沉和图片环绕效果

实现段落首字下沉和图片环绕效果

标签：

Html/CSS

这几天刷任务碰到了一个要求段落首字下沉和图片环绕的问题，查过资料才知道，利用float就可以实现，通常我们再用float时，是不希望浮动的元素影响到下面的元素的，但是段落首字下沉和图片环绕正是利用了float影响其他元素的作用。上实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
</head>
<style>
.main{
    width:400px;
    height:400px;
    margin:0 auto;
    border:4px solid red;
    padding:10px;
}
.content>p:first-letter{
    font-size: 3em;
    /*这个float不能省略，否则无法实现首字下沉*/
    float:left;
    padding:10px;
}
p{
    line-height: 18px;
}
img{
    width:100px;
    height:100px;
    /*对img设置float即可实现文字环绕图片的效果*/
    float:right;
    padding:10px;
}
</style>

<body>
<div class="main">
    <div class="content">
        <p>前端前端前端前端前端前端前端前端前端前端
        前端前端前端前端前端前端前端前端前端前端
        前端前端前端前端前端前端前端前端前端前端
        前端前端前端前端前端前端前端前前端前端前端
        前端前端前端前端前端前端前端</p>
    </div>
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" alt="">
    <div class="article">
        <p>前端前端前端前端前端前端前端前端前端前端
        前端前端前端前端前端前端前端前端前端前端
        前端前端前端前端前端前端前端前端前端前端
        前端前端前端前端前端前端前端前前端前端前
        前端前端前端前端前端前端前端前前端前端前
        前端前端前端前端前端前端前端前端前端前端
        前端前端前端前端前端前端前端前端前前端前
        前端前端前端前端前端前端前端前前端前端前
        前端前端前端前端前端前端前端前前端前端前
        前端前端前端前端前端前端前端前端前端前端
        前端前端前端前端前端前端前端前端前</p>
    </div>
</div>

</body>
</html>

点击查看更多内容