文字环绕图片的实现

想实现文字环绕图片的效果要用float

要点:使用float实现,float最初的作用就是用在环绕。

让文字向左浮动,然后图片向右浮动

HTMl部分

<div class="dc-left-text">
	前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
	<img class="dc-left-img" src="Img/配图三.png" />
	<p>      前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前</p>
	<p>      前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前</p>
</div>
CSS部分:
.dc-left-text{
	width: 428px;
	text-transform: capitalize;
	margin-top: 10px;
	float: left;
}
.dc-left-img{
	float: right;
  	padding: 20px 0 20px 20px;
}

首字下沉效果:

.dc-left-text::first-letter {
	font-weight: bold;
	font-size: 70px;
	color: #F5E327;
	font-family: "微软雅黑";
	float: left;
	margin-right: 10px;
}

首字下沉效果主要使用伪类

阅读更多
个人分类: css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭