溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“如何使用css實現兩端對齊”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“如何使用css實現兩端對齊”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
要實現css兩端對齊，可以選擇column。column是css3的屬性，是多列布局，使用column來實現兩端對齊簡單實用，就要設置下模塊的個數跟column的列數一致就行，先看它的的3個屬性：
1.column-count 屬性規定元素應該被分隔的列數
2.column-gap 屬性規定列之間的間隔
2.column-rule 屬性設置列之間的寬度、樣式和顏色規則。
CSS3 多列屬性的兼容性：Internet Explorer 10 和 Opera 支持多列屬性，Firefox 需要前綴 -moz-，Chrome 和 Safari 需要前綴 -webkit-，特別注意：Internet Explorer 9 以及更早的版本不支持多列屬性。
實現css兩端對齊的例子：用column-count定義對象的列數,例子中有4個p（即4個模塊），那么就定義為4列，再用column-gap定義了對象中列與列的間距，間距不能設置為百分比，但是只能用px，具體的看下面的代碼：
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>實現css兩端對齊</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
margin:100px 0;
-webkit-column-count:4;-moz-column-count:4;column-count:4;
-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;
}
.box p{
height:30px;
line-height:30px;
text-align:center;
border:1px solid red;
color:#000;
font-size:12px;
}
</style>
</head>
<body>
<div class="box">
<p>第1列</p>
<p>第2列</p>
<p>第3列</p>
<p>第4列</p>
</div>
</body>
</html>
css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
以上是“如何使用css實現兩端對齊”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
