在CSS3中column-fill屬性對齊列內容高度的用法詳解-css教學-PHP中文網

首頁

web前端

css教學

在CSS3中column-fill屬性對齊列內容高度的用法詳解

高洛峰

Mar 08, 2017 pm 01:48 PM

column-fill屬性會將不同高度的指定列以高度差最小化的方式進行對齊,這裡我們就來看一下CSS3的column-fill屬性對齊列內容高度的用法詳解:

# column-fill 屬性, 指定列之間高度是否對齊時使用。

屬性值
balance 可能的話，所有的列內容以相同方法對齊（預設值）
auto 後面的列填入在第一列的後面。
※內容為其他網站轉載內容

實例代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title> column-fill </title>   
<style>   
p.prefix_sample1, p.prefix_sample2 {   
width: 600px;   
-moz-column-width: 10em;   
-webkit-column-width: 10em;   
-o-column-width: 10em;   
-ms-column-width: 10em;   
}   
p.prefix_sample1 p {   
-moz-column-fill: balance;   
-webkit-column-fill: balance;   
-o-column-fill: balance;   
-ms-column-fill: balance;   
}   
p.prefix_sample2 p {   
-moz-column-fill: auto;   
-webkit-column-fill: auto;   
-o-column-fill: auto;   
-ms-column-fill: auto;   
}   
</style>   

</head>   

<body>   
<p class="prefix_sample">   
<h5 id="LLLLLLLLL">LLLLLLLLL…</h5>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
<h5 id="LLLLL">LLLLL…</h5>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
</body>   
</html>

#實例圖片

以上是在CSS3中column-fill屬性對齊列內容高度的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcsssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingMultatingMultationMultationProperPertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用CombanningWiThjavoFofofofoftofofo

CSS計數器：自動編號的綜合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他們可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑戰挑戰InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）創造性