右移的方法:1.使用margin-left實作div右移,只需給後一個盒子設定「margin-left:數值」樣式;2、使用margin-right實作div右移,只需要給前一個盒子設定「margin-right:數值」樣式。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
div物件盒子向右偏移設置,使用css讓div靠右一定距離-div向右移教程實例篇
div向右偏移一定距離,可採用margin外邊距實作、也可以使用padding來實現,這就要看不同情況下如何靈活選擇了。這裡thinkcss為大家介紹各種css佈局div向右移方法。
兩個盒子前者是藍色的div,後者是紅色的div,就這種情況下靈活讓紅色div向右浮動偏移一定距離的方法教程分別如下。
基本說明:
為了方便實例,兩個盒子並排,我們將兩個div都設定float浮動樣式,兩個div box同時設定相同寬度和高度。
一、設定margin-left實作div右移
有邊框或背景顏色狀況下
兩個div都設定float:left佈局靠左css樣式,要讓第二個(紅色)div靠右移動一點,通常是對第二個(後者紅色)div設定margin-left。
為設定div靠右移動一點前程式碼:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div向右移一定距离实例</title> <style> .box-a, .box-b { width: 200px; height: 100px; float: left; } .box-a { border: 1px solid #00f; } .box-b { border: 1px solid #f00; } </style> </head> <body> <div class="box-a">第一个(前者)div</div> <div class="box-b">第二个(后者)div</div> </body> </html>
操作設定第二個div左外邊距離樣式
#關鍵CSS程式碼:
.box-a, .box-b { width: 200px; height: 100px; float: left; } .box-a { border: 1px solid #00f; } .box-b { border: 1px solid #f00; margin-left: 20px; }
截圖
二、使用margin-right讓第二個div靠右產生一定距離
使用說明
上一個方法是直接對要右移div設定margin-left本身靠左一定距離,從而實現div自身向右移。
如果使用margin-right就不能對需要向右移div設置,而是對前者(藍色div)設置即可,實現紅色div右移一定距離。
CSS程式碼:
.box-a, .box-b { width: 200px; height: 100px; float: left; } .box-a { border: 1px solid #00f; margin-right: 20px; } .box-b { border: 1px solid #f00; }
截圖:
#利用對藍色div設定margin-right外側右距,這樣讓紅色自然靠藍色div一定距離,從而實現div右篇移
推薦學習:css影片教學
以上是css怎麼把東西往右移的詳細內容。更多資訊請關注PHP中文網其他相關文章!