问题:在遇到多个图片排列在一行或者设置图片与文字对齐的时候会出现
解决方案:
1.可以给图片设置【vertical-align:middle/top/bottom】
2.可以将行内块元素的图片转换为块元素
3.可以给图片的父元素设置:font-size:0;
4.添加浮动
5.添加绝对定位
以下是我在做实际练习遇到的问题并写了一种解决方案
~~~c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.box {
width: 980px;
height: 500px;
margin: 100px auto;
}
.header {
font-weight: 700;
font-size: 16px;
}
ul {
margin-left: 32px;
}
ul li {
float: left;
margin-right: 5px;
width: 210px;
height: 450px;
/* 解决行内块元素img的空白间隙 */
font-size: 0;
}
/* 缩放开始 */
.tp {
width: 210px;
height: 285px;
overflow: hidden;
}
ul li img {
width: 100%;
height: 100%;
}
ul li img:hover {
transition: all .8s;
transform: scale(1.2);
}
.tp:hover {
transition: all .8s;
box-shadow: 1px 1px 5px 5px rgba(238, 5, 226, 0.5);
}
/* 缩放结束 */
ul li h1 {
margin: 20px 0;
}
ul li h1 a {
font-size: 16px;
color: #4d4d4d;
}
ul li h2 {
margin-bottom: 10px;
font-size: 12px;
color: #640000;
}
ul li p {
font-size: 10px;
color: #0000ff;
}
ul li h1 a:hover {
color: #00a4ff;
}
</style>
<body>
<div class="box">
<div class="header">热播</div>
<ul>
<li>
<div class="tp">
<img src="../img/img1.png" alt="">
</div>
<h1><a href="#">神武赵子龙</a></h1>
<h2>怒,林更新不抱网红抱女神</h2>
<p>点击次数:242445次</p>
</li>
<li>
<div class="tp">
<img src="../img/img2.png" alt="">
</div>
<h1><a href="#">旋风十一人</a></h1>
<h2>胡歌变教练在撩前女友</h2>
<p>点击次数:242445次</p>
</li>
<li>
<div class="tp">
<img src="../img/img3.png" alt="">
</div>
<h1><a href="#">太阳的后裔</a></h1>
<h2>宋慧乔吃嫩草</h2>
<p>点击次数:242445次</p>
</li>
<li>
<div class="tp">
<img src="../img/img4.png" alt="">
</div>
<h1><a href="#">山海经之赤影传说</a></h1>
<h2>娜扎张翰再度联手</h2>
<p>点击次数:242445次</p>
</li>
</ul>
</div>
</body>
</html>
~~~