如何使用css實現(xiàn)兩端對齊

發(fā)布時間：2022-01-20 14:52:56 來源：億速云閱讀：154 作者：清風欄目：web開發(fā)

這篇“如何使用css實現(xiàn)兩端對齊”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“如何使用css實現(xiàn)兩端對齊”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

要實現(xiàn)css兩端對齊，可以選擇column。column是css3的屬性，是多列布局，使用column來實現(xiàn)兩端對齊簡單實用，就要設置下模塊的個數(shù)跟column的列數(shù)一致就行，先看它的的3個屬性：

1.column-count 屬性規(guī)定元素應該被分隔的列數(shù)

2.column-gap 屬性規(guī)定列之間的間隔

2.column-rule 屬性設置列之間的寬度、樣式和顏色規(guī)則。

CSS3 多列屬性的兼容性：Internet Explorer 10 和 Opera 支持多列屬性，Firefox 需要前綴 -moz-，Chrome 和 Safari 需要前綴 -webkit-，特別注意：Internet Explorer 9 以及更早的版本不支持多列屬性。

實現(xiàn)css兩端對齊的例子：用column-count定義對象的列數(shù),例子中有4個p（即4個模塊），那么就定義為4列，再用column-gap定義了對象中列與列的間距，間距不能設置為百分比，但是只能用px，具體的看下面的代碼：

<!Doctype html>

<html>

<head>

<title>實現(xiàn)css兩端對齊</title>

*{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>

</body>

</html>

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

以上是“如何使用css實現(xiàn)兩端對齊”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)