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