溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css中column-width屬性的使用方法

發(fā)布時間：2020-05-18 15:00:25 來源：億速云 閱讀：294 作者：栢白 欄目：web開發(fā)

在css中，column-width屬性是用來設置多列布局中列的寬度。column-width屬性和其它一些多列布局屬性不一樣，它可以單獨使用。元素只要定義了column-width屬性，元素就會形成多列布局，形成的列數(shù)取決于column-width屬性值。

css column-width屬性語法格式

css語法：column-width: auto / length;（例：column-width:100px;）

JavaScript語法：object.style.columnWidth="100px"

column-width屬性值說明

auto ：列的寬度由其它因素決定

length：自定義列的寬度（如：100px;）

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3多列布局之column-width屬性設置列的寬度</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;演示：列寬設置為80px。這是為了演示效果多寫的</div>
<div class="b">column-width:100px;演示：列寬設置為100px。這是為了演示效果多寫的</div>
<div class="c">column-width:180px;演示：列寬設置為180p。這是為了演示效果多寫的</div>
</body>
</html>

運行結果

css中column-width屬性的使用方法

以上就是css column-width屬性怎么用的詳細內(nèi)容，更多請關注億速云其它相關文章！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手