首先是沒有進行縮放的圖
進行縮放后
代碼：
<style type="text/css"> * {margin: 0px;padding: 0px;} #i { width: 300px; height: 500px; float: left; background-color: cornflowerblue; transform: scale(0.8); -webkit-transform-origin: 0 0; } #m { float: left; background-color: aquamarine; width: 300px; height: 500px; } </style> </head> <body> <!-- 第一塊 --> <p id="i">Margo</p> <!-- 第二塊 --> <p id="m">Margo</p> </body>
transform布局不會脫離文檔流，也不改變文檔流的大小和位置。
所以元素還是占據了定義時的大小
解決方法
我知道的只有兩種方法
方法一：
把被縮放元素的margin改為負值，改的值為： 縮放前的值 - (scale()里面的值*縮放前的值) 即 width = 300-(0.8*300)=60px
margin: 0 -60px 0 0;
方法二：
這個方法比方法一復雜，是我在幫其他人布局數據圖表時無意間發現的，在網上沒找到暫時沒找到類似的。
思路就是在被縮小的外面套一層，並設置外面層的大小為里層縮放后的大小
圖示:里面層的實際大小要比外面層大
- 實線: 為外層,代碼中的div標簽
- 虛線: 為里層,對應代碼中的p標簽
假設最里層為300x500 縮放的值0.8，則縮放后的大小為240x400
再加上: -webkit-transform-origin: 0 0; 把最外層的div的大小設置為縮放后的圖像的大小(240x400)
代碼：
<style type="text/css"> * {margin: 0px;padding: 0px;} #one2 {float:left;width: 240px;height: 400px;} #two2 {float: left;} /* 第一個p標簽的css */ #i { width: 300px; height: 500px; background-color: cornflowerblue; transform: scale(0.8); -webkit-transform-origin: 0 0; } /* 第二個p標簽的css */ #m { background-color: aquamarine; width: 300px; height: 500px; } </style> </head> <body> <!-- 第一塊 --> <div id="one2"> <p id="i">Margo</p> </div> <!-- 第二塊 --> <div id="two2"> <p id="m">Margo</p> </div>
一樣的效果(關於兩個方法各有什么缺點還不清楚)