使用 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>

更新于: 2020 年 6 月 24 日

117 次浏览

开启您的 职业生涯

完成课程后获取认证

开始
广告
© . All rights reserved.