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
TA贡献37条经验 获得超9个赞
盒式模型计算宽度 width = contentWidth+padding+border+marginleft+marginRight.上面的图片因设置了margin-left值,所以其宽度值已经等于其父元素的宽度了,display为inline-block,自然会换行显示.
- 2 回答
- 0 关注
- 1541 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消