关于css的问题
img是inline-box不是应该不独占一行的吗？什么情况下是独占一行的？下面代码img独占了一行
附代码：
1.html代码
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>我的照片墙</title>
<link rel="stylesheet" type="text/css" href="pic.css">
</head>
<body>
<h1>我的照片墙</h1>
<div class="img">
<img class="pic1" src="we.ipg">
<img class="pic2" src="we.ipg">
</div>
</body>
</html>
2.css代码
*{margin: 0;padding: 0;}
body{background: rgba(0,0,0,0.1)}
h1{
width:500px;
text-align: center;
margin: 20px auto;
}
img{
width: 200px;
height: 300px;
border: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.pic1{
margin-left:300px;
margin-top:100px;
transform:rotate(25deg);
-webkit-transform:rotate(25deg) ;
-moz-transform:rotate(25deg) ;
-o-transform:rotate(25deg) ;
background: #fff;
-webkit-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
.pic1:hover{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-box-shadow: 20px 20px 20px rgba(0,0,0,0.2);
box-shadow: 20px 20px 20px rgba(0,0,0,0.2);
}
.pic2{
margin-left:500px;
margin-top:100px;
transform:rotate(-5deg);
-webkit-transform:rotate(-5deg) ;
-moz-transform:rotate(-5deg) ;
-o-transform:rotate(-5deg) ;
background: #fff;
-webkit-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
可奈姆2回答
-
uhelper_net
盒式模型计算宽度 width = contentWidth+padding+border+marginleft+marginRight.上面的图片因设置了margin-left值,所以其宽度值已经等于其父元素的宽度了,display为inline-block,自然会换行显示.
随时随地看视频慕课网APP
Html/CSS
CSS3