使用 CSS 设置元素跨越的列数


要设置元素跨越的列数,请使用 column-span 属性。你可以尝试运行以下代码来实现 column-span 属性

示例

实时演示

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            column-count: 4;
            column-rule-color: maroon;
            column-rule-style: dashed;
         }
         h1 {
            column-span: all;
         }
      </style>
   </head>
   <body>
      <div class = "demo">
         <h1>This is our heading.</h1>
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
      </div>
   </body>
</html>

更新于: 24-6-2020

117 次浏览

开启你的 职业生涯

完成课程,获得认证

开始
广告
© . All rights reserved.