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條經(jīng)驗 獲得超9個贊
盒式模型計算寬度 width = contentWidth+padding+border+marginleft+marginRight.上面的圖片因設置了margin-left值,所以其寬度值已經(jīng)等于其父元素的寬度了,display為inline-block,自然會換行顯示.
添加回答
舉報
0/150
提交
取消