商品板块对不齐可以用 vertical-align:middle;需要对齐的板块高度最好保持一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: rgb(235, 230, 230);
}
.bankuai{
width: 1400px;
margin: 0px auto;
}
.wrap1, .wrap2{
display: inline-block;
vertical-align:middle;
}
.wrap1{
width: 260px;
height: 700px;
margin: 20px auto;
}
.wrap2{
width: 1100px;
height: 700px;
}
.wrap3{
width: 1400px;
height: 700px;
}
.left1{
width: 260px;
height: 700px;
margin: 10px auto;
}
.capian{
width: 260px;
height: 330px;
background-color: white;
display: inline-block;
margin: 10px auto;
}
.xiaocapian{
width: 260px;
height: 155px;
background-color: white;
margin: 10px auto;
}
.capian, .capian2{
vertical-align:middle;
}
.gengduo{
width: 260px;
height: 155px;
background-color: white;
margin: 10px auto;
}
.img1{
width: 160px;
height: 160px;
margin: 0 auto;
}
.img2{
width: 80px;
height: 80px;
margin: 0 auto;
text-align: right;
}
.hengxiang{
width: 80px;
height: 80px;
}
.capian2{
width: 260px;
height: 330px;
display: inline-block;
margin: 10px auto;
}
.img2, .hengxiang{
display: inline-block;
}
.mingcheng{
text-align: center;
}
.chuliqi{
font-size: 12px;
color: gray;
text-align: center;
}
.jiage{
font-size: 14px;
color: rgb(255, 81, 0);
text-align: center;
}
.xiaomingcheng{
text-align: center;
}
.xiaochuliqi{
font-size: 12px;
color: gray;
text-align: center;
}
.xiaojiage{
font-size: 12px;
color: rgb(255, 81, 0);
text-align: center;
}
.fenlei{
font-size: 25px;
color: gray;
}
.daohang{
width: 800px;
height: 60px;
margin: 10px auto;
}
.dh{
margin: 10px auto;
}
.dh1{
display: inline-block;
margin: 10px 10px;
}
.sousuo{
float: right;
}
.more{
margin: 10px auto;
}
</style>
</head>
<body>
<div class="daohang">
<ul class="dh" type="none">
<li class="dh1">Xiaomi手机</li>
<li class="dh1">Redmi手机</li>
<li class="dh1">电视</li>
<li class="dh1">笔记本</li>
<li class="dh1">平板</li>
<li class="dh1">家电</li>
<li class="dh1">路由器</li>
<li class="dh1">服务中心</li>
<li class="dh1">社区</li>
</ul>
<span class="sousuo">
<input type="text">
<input type="submit" value="搜索"></span>
</div>
<div class="bankuai">
<div class="fenlei">手机</div>
<div class="wrap1">
<div class="left1">
<img src="shoujitupian/shoujileft1.webp" alt="" width="260px" height="680px">
</div>
</div>
<div class="wrap2">
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
</div>
</div>
<div class="bankuai">
<div class="fenlei">平板|笔记本</div>
<div class="wrap1">
<div class="left1">
<img src="shoujitupian/shoujileft1.webp" alt="" width="260px" height="680px">
</div>
</div>
<div class="wrap2">
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">平板名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">平板名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="shoujitupian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">手机名称</p>
<p class="chuliqi">处理器名称</p>
<p class="jiage">价格</p>
</div>
</div>
</div>
<div class="bankuai">
<div class="fenlei">家电</div>
<div class="wrap3">
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian">
<div class="img1">
<img src="jiadian/1.webp" alt="" width="160px" height="160px">
</div>
<p class="mingcheng">家电名称</p>
<p class="chuliqi">家电功能</p>
<p class="jiage">价格</p>
</div>
<div class="capian2">
<div class="xiaocapian">
<div class="hengxiang">
<p class="xiaomingcheng">家电名称</p>
<p class="xiaochuliqi">家电功能</p>
<p class="xiaojiage">价格</p>
</div>
<div class="img2">
<img src="jiadian/2.webp" alt="" width="80px" height="80px">
</div>
</div>
<div class="gengduo">
<span class="more">更多</span>
</div>
</div>
</div>
</div>
</body>
</html>