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>