浅谈CSS文字环绕图片——自定义图片位置

常规的文字环绕图片,只需给图片一个浮动就可以了,但是图片往往在文字的左上角或者右上角。

下面将介绍两种方法,实现图片在文字左/右侧的任意位置,如右下角、右中间等等。


方法一:

原理:在图片所在的div前面增加一个宽度为1px的空div,使空div和图片所在的div都向左/右浮动,再清除图片所在的div受左/右浮动的影响。这样,空div 会把图片挤下去。修改空div的高度,可以调整图片的位置。

<div style="width:500px;overflow:hidden; _zoom:1;">
	<div id="empty" style="float:right;width:1px;height:200px"></div>
	<div style="float:right;clear:right;margin:20px">
		<img src="images/img.png" border="0" />
	</div>
	<P>
		百度前端技术学院是由百度多模交互搜索部EFE团队、百度校园品牌部、百度校园招聘团队创建的面向大学生的前端技术学习平台。
	</p>
</div>

eg:

问题:修改空div的高度后,图片的位置不变,如果文字太少,图片会“掉”下来。 


方法二:

原理:通过jQuery获取文字的高度,动态修改空div的高度。

<script>
$(document).ready(function(){
	var height=$("p").height();
	var marginTop = 300;
	$("#empty").css("height",height-marginTop+"px");
});
</script>
<div style="width:500px">
	<div id="empty" style="float:right;width:1px;"></div>
	<div style="float:right;clear:right;margin:20px">
		<img src="images/img.png" border="0" />
	</div>
	<P>
		百度前端技术学院是由百度多模交互搜索部EFE团队、百度校园品牌部、百度校园招聘团队创建的面向大学生的前端技术学习平台。
	</p>
</div>

eg:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值