图片并排
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片并排排列</title>
<style>
.box{
width: 1100px;
margin: 0px auto;
position: relative;
}
.kuang{
position: relative;
margin-top: 100px;
padding: 20px 45px;
border: 1px solid #ddd;
}
.kuang h2{
width: 156px;
text-align: center;
background-color: #fff;
position: absolute;
left: 455px;
top: -40px;
font-size: 25px;
}
.hezuohuoban
{
border-right: 48px;
overflow: hidden;
clear: both;
border-left: 25px;
padding-left: 55px;
}
.hzhb
{
float: left;
padding: 5px;
border-right: 1px solid #f1f1f2;
border-bottom: 1px solid #f1f1f2;
}
</style>
</head>
<body>
<div class="box">
<div class="kuang" style="padding: 20px 0;">
<h2>合作伙伴</h2>
<div class="hezuohuoban">
<ul>
<li class="hzhb">
<a href="">
<img src="img/al.png" >
</a>
</li>
<li class="hzhb">
<a href="">
<img src="img/hz5.png" height="70px">
</a>
</li>
<li class="hzhb ">
<a href="">
<img src="img/zhaoshang.png" >
</a>
</li>
<li class="hzhb">
<a href="">
<img src="img/bd.png" >
</a>
</li>
<li class="hzhb">
<a href="">
<img src="img/tt.png">
</a>
</li>
<li class="hzhb">
<a href="">
<img src="img/douy.png" height="70px">
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
效果出来是这样子的：
浙公网安备 33010602011771号