鍍金池/ 問答/HTML/ transform影響占據(jù)位置和邊距

transform影響占據(jù)位置和邊距

這是原來的div

clipboard.png

然后設置了transform后

clipboard.png

他的占據(jù)位置沒變，但是他的margin都變了，一般這種情況怎么解決

---------------------------------分隔線--------------------------------------------------

其實就是怎么讓這兩個div變形后占據(jù)位置也變大

<!DOCTYPE html>
<html>
<head>
    <title>css2</title>
    <style>
        .box{
            border: 1px solid red;
            display: inline-block;
        }
        .div{
            height: 100px;
            width: 100px;
            border: 1px solid black;
        }
        .box .div{
            transform: skew(30deg, 0deg);
        }
    </style>
</head>
<body>
        <div class="box">
            <div class="div"></div>
        </div>
        <div class="box">
            <div class="div"></div>
        </div>
</body>
</html>

clipboard.png

變成這樣

clipboard.png

難道只能更具他變形的大小調整margin嗎？？

回答
編輯回答
還吻

不如試試絕對布局？

2017年5月11日 10:17