mian框中的p溢出

文字不在div框中，什么原因呢

.pic {
    width:300px;
    height:290px;
    border:1px solid #ccc;
    background:#fff;
    box-shadow:2px 2px 3px #aaa;
}
.pic p {
    text-align: center;
    font-size:20px;
}

透明的世界 2017-07-05

源自：CSS3转换 2-1 rotate

收起

3回答

怎么都被占用了呢回答被采纳获得+3积分 2017-07-06 10:46:11

因为字体的180px所致

收起回答

透明的世界提问者 #1

非常感谢！

2017-07-06 11:03:54

提问者透明的世界 2017-07-06 10:38:11

body {
    font:12px/180px Arial;
}
上面这句什么意思
好像是这句话的原因，去掉就好了

收起回答

怎么都被占用了呢 2017-07-06 09:57:25

方便把代码完整的放上来吗？方便调试。

收起回答

提问者透明的世界 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Rotate2d</title> <style> * { margin:0; padding:0; list-style-type:none; } a,img { border:0; } body { font:12px/180px Arial; } .main { width:1000px; margin:50px auto; position: relative; } .pic { width:300px; height:290px; border:1px solid #ccc; background:#fff; box-shadow:2px 2px 3px #aaa; } .pic img { margin:10px 0 0 8px; width:285px; } .pic p { text-align: center; font-size:20px; } .pic1 { transform:rotate(7deg); } .pic2 { transform:rotate(-8deg); } .pic3{ position: absolute; top:40px;left:350px;z-index:2; transform:rotate(35deg); } .pic4 { position:absolute; top:360px; left:350px;z-index:3; transform:rotate(-35deg); } .pic5 { position:absolute; top:150px; left:600px;z-index:4; transform:rotate(60deg); } .pic6 { position: absolute; top:180px;left:280px;z-index:5; transform:rotate(-60deg); } </style> </head> <body> <div class="main"> <div class="pic pic1"><img src="../img/1.jpg"><p>2D转换</p></div> <div class="pic pic2"><img src="../img/2.jpg"><p>2D转换</p></div> <div class="pic pic3"><img src="../img/3.jpg"><p>2D转换</p></div> <div class="pic pic4"><img src="../img/4.jpg"><p>2D转换</p></div> <div class="pic pic5"><img src="../img/5.jpg"><p>2D转换</p></div> <div class="pic pic6"><img src="../img/6.jpg"><p>2D转换</p></div> </div> </body> </html>

2017-07-06 10:03:23