在css中,column-width屬性是用來設(shè)置多列布局中列的寬度。column-width屬性和其它一些多列布局屬性不一樣,它可以單獨(dú)使用。元素只要定義了column-width屬性,元素就會(huì)形成多列布局,形成的列數(shù)取決于column-width屬性值。
css column-width屬性語法格式
css語法:column-width: auto / length;(例:column-width:100px;)
JavaScript語法:object.style.columnWidth="100px"
column-width屬性值說明
auto :列的寬度由其它因素決定
length:自定義列的寬度(如:100px;)
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css3多列布局之column-width屬性設(shè)置列的寬度</title> <style type="text/css"> body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;margin-top:10px;column-rule-style:solid;} .a{column-width:80px;} .b{column-width:100px;} .c{column-width:180px;} </style> </head> <body> <div class="a">column-width:80px;演示:列寬設(shè)置為80px。這是為了演示效果多寫的</div> <div class="b">column-width:100px;演示:列寬設(shè)置為100px。這是為了演示效果多寫的</div> <div class="c">column-width:180px;演示:列寬設(shè)置為180p。這是為了演示效果多寫的</div> </body> </html>
運(yùn)行結(jié)果
以上就是css column-width屬性怎么用的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前文章:css中column-width屬性的使用方法-創(chuàng)新互聯(lián)
當(dāng)前URL:http://jinyejixie.com/article42/gpehc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、App開發(fā)、營銷型網(wǎng)站建設(shè)、網(wǎng)站制作、自適應(yīng)網(wǎng)站、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容