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

CSSで列の幅を指定する

column-widthを使用します 列の幅を指定するプロパティ。次のコードを実行して、column-widthプロパティ-

を実装してみてください。

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo {
            column-count: 4;
            column-rule-color: gray;
            column-rule-style: dashed;
            column-width: 100px;
         }
      </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の@mediaAt-rules

    CSS @mediaルールは、単一のスタイルシートでさまざまなメディアタイプ（印刷、画面、すべてなど）にさまざまなスタイルを指定するために使用されます。通常、その後にメディアタイプのコンマ区切りリストと、ターゲットメディアのスタイルルールを含むCSS宣言ブロックが続きます。 構文 以下は構文です- @media not | only mediatype and (expressions) {    CSS-Code; }のみ 例 CSS@mediaルールの例を見てみましょう- <!DOCTYPE html> <html> <head>

  2. CSSを使用したテキストインデント

    CSS text-indentプロパティは、要素の最初の行のインデントを設定するのに役立ちます。 構文 CSStext-indentプロパティの構文は次のとおりです- Selector {    text-indent: /*value*/ } 例 次の例は、CSSのtext-indentプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    display: flex;    float: left;