关于html<div>块下的<img>布局

1,要实现的效果如下:

2,实现代码:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.three{width: 100%;max-width: 750px;margin-top: 10px;overflow: hidden;}
        .three .a{width: 40%;float: left;}  <!--div的大小占40%的水平宽度,且向左浮动,跟img 
                                             是否向左浮动无关-->
        .three .a img{float: right;margin-top: 15px;}<!--img的float样式是相对于div框的-->
        .three .b{width: 20%;float: left;text-align: center;margin-top: 10px;}
        .three .c{width: 40%;float: left;}
        .three .c img{float: left;margin-top: 15px;}
	</style>
</head>
<body>
   <div class="three">
			<div class="a">
				<img src="../img/dianleft.png">
			</div>	
			<div class="b">
				<span>畅游中国</span>
			</div>	
			<div class="c">
				<img src="../img/dianright.png">
			</div>	
		</div>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值