css实现图文环绕

2017-03-08   |     |     |  

经常我们需要实现一个效果就是文字和图片的混排,需要实现文本环绕效果,这个效果其实是float的一个特性之一,利用float可以轻松实现文本环绕效果。

实现方法

通过设置图片为float,脱离文档流,文字默认还是在文档流之中,会出先文字环绕效果。

html

<body>
<h1>文字环绕效果</h1>
<div>
<img src="images/1.jpg" alt="" />
</div>
<p>这是开头文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字……</p>
</body>

css

不仅如此,还可以设置margin让排版更加的美观

div{
float: left;
width: 300px;
height: 450px;
margin:0px 20px 10px 0px;
}

效果

your text