当元素宽度增加时，如何实现“向右增加”，“向左增加”，“从中间向
2018-03-21 本文已影响0人
旋转小雪球
1.当div元素实现了左右居中时，当hover的时候设置width增大，那么宽度会默认从中间向两侧增加。（例子中的 id=d1）
2.一个未进行任何设置的div元素，当hover的时候设置width增大，那么宽度会默认向右增加。（例子中的 id=d2）
3.当div元素设置了margin:0 0 0 auto，当hover的时候设置width增大，那么宽度会默认从右向左增加。（例子中的 id=d3）
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
margin: auto;
background-color: red;
width:130px;
transition: all 1s linear;
}
#d2{
background-color: #5cb85c;
width:120px;
transition: all 1s linear;
}
#d3{
margin: 0 0 0 auto;
background-color: orange;
width:120px;
transition: all 1s linear;
}
#d1:hover,#d2:hover,#d3:hover{
width:300px;
}
</style>
</head>
<body>
<div id="d1">从中间向两端 d1</div>
<div id="d2">从左向右 d2</div>
<div id="d3">从右向左 d3</div>
</body>
</html>
