css3多列布局例子

CSS3的多列布局可以使用column-*属性来实现,这些属性包括column-countcolumn-gapcolumn-rule等。以下是一个简单的多列布局示例:

代码

<div class=“multi-column”>
  <p>这里是一些文本内容,将会被分布到多列中。</p>
  <!– 更多内容 –>
</div>
.multi-column {
  -webkit-column-count: 3; /* Chrome, Safari, Opera /
  -moz-column-count: 3;    / Firefox */
  column-count: 3;

-webkit-column-gap: 20px; /* Chrome, Safari, Opera / -moz-column-gap: 20px; / Firefox */ column-gap: 20px;

-webkit-column-rule: 1px solid #ccc; /* Chrome, Safari, Opera / -moz-column-rule: 1px solid #ccc; / Firefox */ column-rule: 1px solid #ccc; }

CSS
过期时间:永久公开
创建于:2024-03-26 10:51
155
相关推荐