CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素を分割する列数を指定する方法

要素を分割する列の数を指定するには、column-countプロパティを使用します。

次のコードを実行して、4列のcolumn-countプロパティを実装してみてください

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            column-count: 4;
         }
      </style>
   </head>
   <body>
      <div class = "demo">
         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>

  1. テキストの最後の行をCSSに揃えます

    text-align-lastプロパティは、テキストの最後の行を揃えるために使用されます。次のコードを実行して、テキストの最後の行をCSSに揃えることができます 例 <!DOCTYPE html> <html>    <head>       <style>          .mydiv {             text-align-last: right;    

  2. CSSで要素のアスペクト比を維持するにはどうすればよいですか？

    CSSを使用して要素のアスペクト比を維持するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans