如風(fēng)般魅影 ·columns 字符分割
這個(gè)屬性主要用來對字符進(jìn)行橫向分割排版，例如報(bào)紙的版面。
1. 官方定義
columns屬性是一個(gè)簡寫屬性，用于設(shè)置列寬和列數(shù)。
2. 慕課解釋
columns 是 column-width每列寬度，column-count 每列的列數(shù)這兩個(gè)屬性的縮寫，當(dāng)列寬和列數(shù)的乘積大于元素的寬度時(shí)候就不會(huì)在分開自動(dòng)合成一列。當(dāng)他們的乘積小于元素的外寬的時(shí)候，每列的實(shí)際寬度可能大于column-width 設(shè)定的值。
3. 語法
使用 columns 時(shí)候
.demo{
columns: column-width column-count;
}
| 值 | 描述 |
|---|---|
| column-width | 寬度 px|rem|em |
| column-count | 數(shù)字代表分的列數(shù) |
單獨(dú)使用時(shí)候：
.demo{
column-count:number;
column-width：value
}
另外 colunms 還有其他的補(bǔ)充屬性：
column-gap:<length> | normal
設(shè)置列與列之間的距離：
column-gap:<length> | normal
設(shè)置列與列之間的邊線：
column-rule：[ column-rule-width ] [ column-rule-style ] [ column-rule-color ]
內(nèi)部元素是否允許橫跨所有的列：
column-span：none | all
| 值 | 描述 |
|---|---|
| none | 不允許子元素單獨(dú)一行 |
| all | 指定子元素單獨(dú)一行 |
列的高度是否統(tǒng)一：
column-fill :auto | balance
| 值 | 描述 |
|---|---|
| auto | 自適應(yīng)高度也就是它們有不同的高度。 |
| balance | 以最高的子元素為統(tǒng)一高度 |
這個(gè)屬性兼容性極差，除了火狐支持外其它瀏覽器均不在支持了。
4. 兼容性
| IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
|---|---|---|---|---|---|---|---|
| 9+ | 12+ | 28+ | 4+ | 6.1+ | 12.1+ | 7+ | 4.4 |
5. 實(shí)例
- 對一段文本分兩列每列寬度不小于 200px。
.demo{
-webkit-columns:200px 2;
}
效果圖
實(shí)例演示
預(yù)覽
復(fù)制
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:200px 2;
}
</style>
<div class="demo">
<p>
輕輕的我走了，
正如我輕輕的來；
我輕輕的招手，
作別西天的云彩。
那河畔的金柳，
是夕陽中的新娘；
波光里的艷影，
在我的心頭蕩漾。
軟泥上的青荇，
油油的在水底招搖；
在康河的柔波里，
我甘心做一條水草！
那榆蔭下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻間，
沉淀著彩虹似的夢。
尋夢？
撐一支長篙，
向青草更青處漫溯；
滿載一船星輝，
在星輝斑斕里放歌。
但我不能放歌，
悄悄是別離的笙簫；
夏蟲也為我沉默，
沉默是今晚的康橋！
悄悄的我走了，
正如我悄悄的來；
我揮一揮衣袖，
不帶走一片云彩。
</p>
</div>
</head>
<body>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
- 對一段文本分 3 列每列寬度不小于 200px。
.demo{
-webkit-columns:200px 3;
}
效果圖
實(shí)例演示
預(yù)覽
復(fù)制
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:200px 3;
}
</style>
<div class="demo">
<p>
輕輕的我走了，
正如我輕輕的來；
我輕輕的招手，
作別西天的云彩。
那河畔的金柳，
是夕陽中的新娘；
波光里的艷影，
在我的心頭蕩漾。
軟泥上的青荇，
油油的在水底招搖；
在康河的柔波里，
我甘心做一條水草！
那榆蔭下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻間，
沉淀著彩虹似的夢。
尋夢？
撐一支長篙，
向青草更青處漫溯；
滿載一船星輝，
在星輝斑斕里放歌。
但我不能放歌，
悄悄是別離的笙簫；
夏蟲也為我沉默，
沉默是今晚的康橋！
悄悄的我走了，
正如我悄悄的來；
我揮一揮衣袖，
不帶走一片云彩。
</p>
</div>
</head>
<body>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
- 對兩段文本分 3 列。
<div class="demo">
<p>
輕輕的我走了，正如我輕輕的來；
我輕輕的招手，作別西天的云彩。 那河畔的金柳， 是夕陽中的新娘； 波光里的艷影， 在我的心頭蕩漾。軟泥上的青荇，油油的在水底招搖； 在康河的柔波里， 我甘心做一條水草！ 那榆蔭下的一潭，不是清泉， 是天上虹； 揉碎在浮藻間，沉淀著彩虹似的夢。 尋夢？
</p>
<p>
撐一支長篙， 向青草更青處漫溯；滿載一船星輝， 在星輝斑斕里放歌。但我不能放歌，悄悄是別離的笙簫； 夏蟲也為我沉默，沉默是今晚的康橋！悄悄的我走了，正如我悄悄的來； 我揮一揮衣袖，不帶走一片云彩。
</p>
</div>
.demo
{
-webkit-columns:200px 3;
}
p{
margin: 0;
}
效果圖
實(shí)例演示
預(yù)覽
復(fù)制
<!DOCTYPE html>
<html>
<head>
<style>
.demo
{
-webkit-columns:200px 3;
}
p{
margin: 0;
}
</style>
<div class="demo">
<p>
輕輕的我走了，
正如我輕輕的來；
我輕輕的招手，
作別西天的云彩。
那河畔的金柳，
是夕陽中的新娘；
波光里的艷影，
在我的心頭蕩漾。
軟泥上的青荇，
油油的在水底招搖；
在康河的柔波里，
我甘心做一條水草！
那榆蔭下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻間，
沉淀著彩虹似的夢。
尋夢？
</p>
<p>
撐一支長篙，
向青草更青處漫溯；
滿載一船星輝，
在星輝斑斕里放歌。
但我不能放歌，
悄悄是別離的笙簫；
夏蟲也為我沉默，
沉默是今晚的康橋！
悄悄的我走了，
正如我悄悄的來；
我揮一揮衣袖，
不帶走一片云彩。
</p>
</div>
</head>
<body>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
- 修改兩列間隔的距離。
.demo{
-webkit-columns:200px 2;
column-gap:100px
}
效果圖
實(shí)例演示
預(yù)覽
復(fù)制
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:200px 2;
column-gap:100px
}
</style>
<div class="demo">
<p>
輕輕的我走了，
正如我輕輕的來；
我輕輕的招手，
作別西天的云彩。
那河畔的金柳，
是夕陽中的新娘；
波光里的艷影，
在我的心頭蕩漾。
軟泥上的青荇，
油油的在水底招搖；
在康河的柔波里，
我甘心做一條水草！
那榆蔭下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻間，
沉淀著彩虹似的夢。
尋夢？
</p>
<p>
撐一支長篙，
向青草更青處漫溯；
滿載一船星輝，
在星輝斑斕里放歌。
但我不能放歌，
悄悄是別離的笙簫；
夏蟲也為我沉默，
沉默是今晚的康橋！
悄悄的我走了，
正如我悄悄的來；
我揮一揮衣袖，
不帶走一片云彩。
</p>
</div>
</head>
<body>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
- 為每列直接增加邊線。
.demo{
-webkit-columns:200px 2;
column-gap:100px;
column-rule:1px solid #ccc;
}
效果圖
實(shí)例演示
預(yù)覽
復(fù)制
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:200px 2;
column-gap:100px;
column-rule:1px solid #ccc;
}
</style>
<div class="demo">
<p>
輕輕的我走了，
正如我輕輕的來；
我輕輕的招手，
作別西天的云彩。
那河畔的金柳，
是夕陽中的新娘；
波光里的艷影，
在我的心頭蕩漾。
軟泥上的青荇，
油油的在水底招搖；
在康河的柔波里，
我甘心做一條水草！
那榆蔭下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻間，
沉淀著彩虹似的夢。
尋夢？
</p>
<p>
撐一支長篙，
向青草更青處漫溯；
滿載一船星輝，
在星輝斑斕里放歌。
但我不能放歌，
悄悄是別離的笙簫；
夏蟲也為我沉默，
沉默是今晚的康橋！
悄悄的我走了，
正如我悄悄的來；
我揮一揮衣袖，
不帶走一片云彩。
</p>
</div>
</head>
<body>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
- 讓其內(nèi)部
class="head"個(gè)子元素橫跨所有列
<div class="demo">
<p class="head">再別康橋</p>
<p>
輕輕的我走了，正如我輕輕的來；
我輕輕的招手，作別西天的云彩。 那河畔的金柳， 是夕陽中的新娘； 波光里的艷影， 在我的心頭蕩漾。軟泥上的青荇，油油的在水底招搖； 在康河的柔波里， 我甘心做一條水草！ 那榆蔭下的一潭，不是清泉， 是天上虹； 揉碎在浮藻間，沉淀著彩虹似的夢。 尋夢？
</p>
<p>
撐一支長篙， 向青草更青處漫溯；滿載一船星輝， 在星輝斑斕里放歌。但我不能放歌，悄悄是別離的笙簫； 夏蟲也為我沉默，沉默是今晚的康橋！悄悄的我走了，正如我悄悄的來； 我揮一揮衣袖，不帶走一片云彩。
</p>
</div>
.demo{
-webkit-columns:200px 2;
column-gap:100px;
column-rule:1px solid #ccc;
}
.head{
column-span:all;
}
p{
margin: 0;
text
}
效果圖
實(shí)例演示
預(yù)覽
復(fù)制
<!DOCTYPE html>
<html>
<head>
<style>
.demo{
-webkit-columns:200px 2;
column-gap:100px;
column-rule:1px solid #ccc;
}
.head{
column-span:all;
text-align: center;
}
p{
margin: 0;
background: #ccc;
column-fill:balance;
}
</style>
<div class="demo">
<p class="head">
再別康橋
</p>
<p>
輕輕的我走了，
正如我輕輕的來；
我輕輕的招手，
作別西天的云彩。
那河畔的金柳，
是夕陽中的新娘；
波光里的艷影，
在我的心頭蕩漾。
軟泥上的青荇，
油油的在水底招搖；
在康河的柔波里，
我甘心做一條水草！
那榆蔭下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻間，
沉淀著彩虹似的夢。
尋夢？
</p>
<p>
撐一支長篙，
向青草更青處漫溯；
滿載一船星輝，
在星輝斑斕里放歌。
但我不能放歌，
悄悄是別離的笙簫；
夏蟲也為我沉默，
沉默是今晚的康橋！
悄悄的我走了，
正如我悄悄的來；
我揮一揮衣袖，
不帶走一片云彩。
</p>
</div>
</head>
<body>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果
6. 經(jīng)驗(yàn)分享
使用 columns 可以快速的把元素內(nèi)的字符分成我們想要的列數(shù)，如果想要自適應(yīng)該怎么做呢？可以只設(shè)置列數(shù)這樣在一定程度上可以不考慮元素的寬度，如下：
.demo{
-webkit-columns:2;
}
這樣不管窗口怎么邊它都是分成兩列，其實(shí)任何自適應(yīng)的原理也是如此。
7. 小結(jié)
- 它分的列和子元素的個(gè)數(shù)無關(guān)。
- 分的列數(shù)最好保證和內(nèi)部子元素?cái)?shù)量相等。
2025 imooc.com All Rights Reserved |