在CSS3中column-fill属性对齐列内容高度的用法详解-css教程-PHP中文网

首页

web前端

css教程

在CSS3中column-fill属性对齐列内容高度的用法详解

高洛峰

Mar 08, 2017 pm 01:48 PM

column-fill属性会将不同高度的指定列以高度差最小化的方式进行对齐,这里我们就来看一下CSS3的column-fill属性对齐列内容高度的用法详解:

column-fill 属性, 指定列之间高度是否对齐时使用。cf821d91f7a22d0312ea4da875ca2021

属性值
balance 可能的话，所有的列内容以相同方法对齐（默认值） 0283df7fa08c6c9aa89fdb91b722f217
auto 后面的列填充在第一个列的后面。 06167c95d9c609b12dc03c1735cb90fc
※a8093152e673feb7aba1828c43532094内容为其他网站转载内容

实例代码

<!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>LLLLLLLLL…</h5>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
<p>   
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   
</p>   
<h5>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 powerincreatingsmoothcssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingmatematingmultationmatingMultationPropertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用BombingingWithjavofofofofofoffo

CSS计数器：自动编号的综合指南May 07, 2025 pm 03:45 PM

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