极客观点
项目管理
HarmonyOS
为什么绝对定位后（或者不是因为绝对定位）内联元素的宽度不是自适应，而是固定了宽度？
求解答，谢谢~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.main {
background-color: #eee;
width: 100%;
margin-top: 20px;
font-size: 0px;
height: 300px;
}
.d1 {
position: relative;
display: inline-block;
height: 240px;
width: 200px;
background-color: #fff;
transition: width 0.8s;
text-align: center;
}
.img-p {
position: absolute;
display: inline-block;
top: 30%;
left: 50px;
transition: all 0.8s;
}
.pic {
width: 100px;
transition: all 0.8s;
}
.text-name {
top: 5%;
left: 0px;
right: 0px;
position: absolute;
font-size: 15px;
display: inline;
transition: all 0.8s;
}
.text-bd {
top: 15%;
left: 0px;
right: 0px;
position: absolute;
font-size: 15px;
display: inline;
transition: all 0.8s;
}
</style>
</head>
<body style="margin: 0px;">
<div class="main">
<ul>
<li class="d1">
<div class="text-name">name:xianer</div>
<div class="text-bd">born-date:2015.10</div>
<div class="img-p">
<img class="pic" src="src/xianer.jpg" alt="">
</div>
</li>
<li class="d1">
<div class="text-name">name:xianer</div>
<div class="text-bd">born-date:2015.10</div>
<div class="img-p">
<img class="pic" src="src/xianer.jpg" alt="">
</div>
</li>
</ul>
</div>
</body>
<script>
var a = document.getElementsByClassName('img-p')[0],
b = document.getElementsByClassName('pic')[0],
c = document.getElementsByClassName('d1')[0];
c.addEventListener('mouseover', function () {
this.style.width = "300px";
a.style.left = '120px';
b.style.width = '150px';
c = c.getElementsByTagName('div');
for(var i=0;i<c.length-1;i++){
c[i].style.right = '150px';
}
})
</script>
</html>
因为你的设置了
left: 0px;right: 0px;这样的话<div>就拉申和外层的<li>一样宽了，js代码中又去改变了right:150px而<li>改变width: 300px;那 当前的<div class="text-name">name:xianer</div>其实是left: 0px;right: 150px;做后就是你看到的 300 - 150 = 150px