CSS Multi-column

CSS multi-column layout

CSS ng multi-column layout ay nagbibigay sa amin ng kapahalan na maglagay ng multi-column text - tulad ng pahayagan:

Three Kingdoms

Unang Bumagay
Ang pagkakasama ng mga matagumpay na tao sa pagtitipon sa Yu Tao Yuan
Tinambangan ang pinakamahusay na lalaki sa pagtutol sa Yellow Turban

Ang sabi, ang pangyayari sa buong mundo, kung napagtaglay na, ay magiging magkakasama; kung magkakasama na, ay magiging magkakahiwalay: sa katapusan ng dinastiyang Zhou, ang pitong bansa ay nagtatalo, at nagsama-sama sa Qin; pagkatapos ng pagbubuwal ng Qin, ang Chu at Han ay nagtatalo, at nagsama-sama sa Han; ang dinastiyang Han mula kay kezia ang pinagsisikap na maghiwalay, nagtungo sa isang pinagsamang mundo, pagkatapos ng pagbabalik ni Guangwu, ipinagkakaloob sa Huan Di, at nagsapit sa tatlong bansa. Tinuturing ang dahilan ng pagkakaroon ng kaguluhan, ay nagsimula sa emperador Huan at Ling. Pinagbawal ni Huan ang mga mahusay na tao, at pinagsalitang ang mga kawani ng palasyo. Pagkatapos ng pagkamatay ni Huan, si Ling ay naging emperador, ang heneral Ni Wu at ang abugado Chen Fan, ay nagkakaisa sa pagtulong; mayroong kawani ng palasyo na si Cao Jie at iba pa na nagsasagawa ng kapangyarihan, Ni Wu at Chen Fan ay nagpaplano na patayin sila, ngunit ang pagpupursigeng ito ay hindi naging mapatay, kundi sa halip ay nadamitan nila, at mula noon ay nagiging mas malakas ang kapangyarihan ng mga kawani ng palasyo. Noong Apat na Mayo ng Taon ng Jian Ning, ang emperador ay nasa Wende Hall. Pagkatapos ng pagtungo sa isang silya, ang hangin ay nagpasalamat mula sa sulok ng palasyo, at may isang malaking berde na aso, na lumipad mula sa bato, at lumulot sa silya. Ang emperador ay nasindak, at iniligtas ng kanyang mga katulong sa palasyo, at ang lahat ng mga opisyal ay nagtatalo. Pagkatapos ng ilang sandali, ang aso ay nawala. Nagpasalamat ang malakas na kidlat at ulan, kasama ng malaking yelo, hanggang sa alas-12 ng gabi, at puminsala sa maraming mga bahay. Noong Pebrero ng Taon ng Jian Ning apat, ang Luyang ay nagtanggap ng lindol; at ang dagat ay nangagpapaon, at ang mga residente sa baybayin ay nadala ng malaking alon sa dagat. Noong Taon ng Guanghe, ang isang babaeng itik ay naging lalaki. Noong Hunyo ng Taon ng Guanghe, mayroong maliit na liwanag na umaakyat ng dalawampung talampakan, na lumilipad sa Wende Hall. Noong Agosto ng Taon ng Guanghe, may isang uyot na lumilitaw sa Yu Tang, at ang Wuyuan ng baybayin ay naghihiwalay. Ang iba't ibang pang masamang pangyayari, hindi lamang isang bagay. Ang emperador ay nagbigay ng isang isyu sa lahat ng mga opisyal upang malaman ang dahilan ng mga kaganapan, at ang konsulenteng si Cai Yong ay nagbigay ng isang sulat, na iniisip niya na ang pagsakop ng liwanag ng itik at ang pagbabago ng kasarian ng itik, ay dahil sa ang pangangasiwa ng mga babae at mga kawani ng palasyo, ang mga sinabi ay lubos na malinaw at tapat. Ang emperador ay naghayag ng pakiramdam ng pakiramdam, at nagpapatuloy sa pagbabago ng damit. Si Cao Jie ay nagsimula sa likod, at inihayag sa lahat ng kanyang kalakip; at sa kanyang pagkakasala ay pinatunayan si Cai Yong, at inilagay sa bukid. Pagkatapos, ang mga si Zhang Rang, Zhao Zhong, Feng Yu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, at Guo Sheng, sampu na tao, ay nagkakaisa sa pagpipisan ng masamang gawain, na tinawag na ' sampung pangkaraniwang kawani'. Ang emperador ay nagpahalaga sa si Zhang Rang, at tinatawag siya na 'Ama'. Ang pamahalaan ay nagiging mas masama araw-araw, at nagiging mas masama ang isip ng lahat ng tao sa buong mundo, at ang mga magnanakaw ay nagpapasalamat.

...... ......

CSS Multi-column Attribute

...... ......

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Sa kabanatang ito, matututuhan mo ang mga sumusunod na multi-column attribute:

Suporta ng Browser

Attribute Ang numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa attribute na ito. IE Firefox Safari Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS na nagtatayo ng multi-column

column-count Ang attribute ay nagtatakda ng bilang ng mga column na dapat hatiin ng elemento:

Ang sumusunod na halimbawa ay naghati ang teksto ng <div> sa tatlong column:

Halimbawa

div {
  column-count: 3;
}

Subukan nang sarili

CSS na tinukoy ang puwang sa pagitan ng mga column

column-gap Ang attribute ay nagtatakda ng puwang sa pagitan ng mga column:

Ang sumusunod na halimbawa ay nagtatakda na ang puwang sa pagitan ng mga column ay dapat 40 pixels:

Halimbawa

div {
  column-gap: 40px;
}

Subukan nang sarili

CSS Column Rule

column-rule-style Ang attribute ay nagtatakda ng istilo ng luwang sa pagitan ng mga column:

Halimbawa

div {
  column-rule-style: solid;
}

Subukan nang sarili

column-rule-width Ang attribute ay nagtatakda ng luwang ng luwang sa pagitan ng mga column:

Halimbawa

div {
  column-rule-width: 1px;
}

Subukan nang sarili

column-rule-color Ang attribute ay nagtatakda ng kulay ng luwang sa pagitan ng mga column:

Halimbawa

div {
  column-rule-color: lightblue;
}

Subukan nang sarili

Ang column-rule attribute ay isang maikling paraan para sa pagtatakda ng lahat ng column-rule-* na attribute.

Ang sumusunod na talatawag ay nagtatakda ng luwang, istilo at kulay ng luwang sa pagitan ng mga column:

Halimbawa

div {
  column-rule: 1px solid lightblue;
}

Subukan nang sarili

Tinukoy kung ilang column ang dapat lumampas ng elemento

column-span Ang attribute ay nagtatakda kung ilang column ang dapat lumampas ng elemento.

Ang sumusunod na talatawag ay nagtatakda na ang <h2> na elemento ay dapat lumampas sa lahat ng column:

Halimbawa

h2 {
  column-span: all;
}

Subukan nang sarili

Tinukoy ang luwang ng column

column-width Ang attribute ay nagtatakda ng maayos na luwang na dapat itakda sa column.

Ang sumusunod na talatawag ay nagtatakda na ang maayos na luwang ng column ay dapat 100px:

Halimbawa

div {
  column-width: 100px;
}

Subukan nang sarili

CSS Multi-column Attribute

Ang sumusunod na talahanayan ay naglilista ng lahat ng mga multi-column attribute:

Attribute Paglalarawan
column-count Tinutukoy ang bilang ng mga column na dapat hatiin ng elemento.
column-fill Tinutukoy kung paano ilalagay ang mga column.
column-gap Tinukoy ang paghahalaga ng puwang sa pagitan ng mga column.
column-rule Ginagamit para sa pagtatakda ng maikling paraan ng lahat ng column-rule-* na attribute.
column-rule-color Tinutukoy ang kulay ng luwang sa pagitan ng mga column.
column-rule-style Tinutukoy ang istilo ng luwang sa pagitan ng mga column.
column-rule-width Tinutukoy ang kahulugan ng luwang sa pagitan ng mga column.
column-span Specify how many columns an element should span.
column-width Specify the best width recommended for the columns.
columns Abbreviated properties for setting column-width and column-count.