溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css中怎么設(shè)置div向右偏移”，文中的講解內(nèi)容簡單清晰，易于學(xué)習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習“css中怎么設(shè)置div向右偏移”吧！
div向右偏移一定間隔，可采納margin外邊距實現(xiàn)、也可運用padding來完成，這就要看差異狀況下如何銳敏決定了。這里CSS5為人人先容各類css機關(guān)div向右移法子。
兩個盒子前者是藍色的div，后者是血色的div,就這類環(huán)境下靈活讓血色div向右浮動偏移不一定間隔的辦法教程分袂下列。
根蒂闡明：
為了便于實例，兩個盒子并排，我們將兩個div均設(shè)置float浮動名堂，兩個div box同時設(shè)置裝備擺設(shè)類似寬度和高度。
1、有邊框或有配景顏色環(huán)境下
兩個div均設(shè)置裝備擺設(shè)float:left組織靠左css格局，要讓第二個（紅色）div靠右挪動一點，通常是對第二個（后者 赤色）div設(shè)置margin-left。
2、為配置div靠右挪動一點前代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div向右移不一定距離實例 css5.com.cn</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>3、截圖
設(shè)置div右移前
4、壟斷設(shè)置裝備擺設(shè)第二個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}截圖
設(shè)置裝備擺設(shè)margin-left完成血色div右移一定隔絕距離
1、使用說明
上一個辦法是直接對要右移div設(shè)置裝備擺設(shè)margin-left自身靠左定然間隔，從而實現(xiàn)div自身向右移。
要是使用margin-right就不克不及對需求向右移div設(shè)置，而是對前者（藍色div）設(shè)置裝備擺設(shè)就可，完成紅色div右移未必隔斷。
2、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}3、截圖：
margin-right完成div盒子右移
利用對藍色div設(shè)置margin-right外右側(cè)距，多么讓紅色自然靠藍色div一定間隔，從而完成div右篇移
要對右移div自身設(shè)置裝備擺設(shè)padding-left，有一個前提前提，這個div沒有邊框與div本身布景與div外后援色不有甄別，何等憑借padding-left內(nèi)左邊距，完成div沒有右移，模式右移，看上去就像div右移的同樣成績。
1、環(huán)節(jié)CSS代碼
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{padding-left:20px}2、截圖
感謝各位的閱讀，以上就是“css中怎么設(shè)置div向右偏移”的內(nèi)容了，經(jīng)過本文的學(xué)習后，相信大家對css中怎么設(shè)置div向右偏移這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼