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

JavaScriptで列間のギャップを設定するにはどうすればよいですか？

列間のギャップを設定するには、 columnGapを使用します プロパティ。

例

次のコードを実行して、JavaScriptで列間のギャップを設定する方法を学ぶことができます-

<!DOCTYPE html>
<html>
   <body>
      <p>Click below to create 4 columns and set gap of 30px</p>
      <button onclick="display()">Columns</button>
      <div id="myID">
         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>
      <script>
         function display() {
            document.getElementById("myID").style.columnCount = "4";
            document.getElementById("myID").style.columnGap = "30px";
         }
      </script>
   </body>
</html>

  1. CSSで列間のギャップを指定します

    column-gapプロパティを使用して、列間のギャップを設定します。次のコードを実行して、値50pxのcolumn-gapプロパティを実装してみてください。 例 <!DOCTYPE html> <html>    <head>       <style>          .demo {             column-count: 4;      

  2. CSSを使用して列間のルールの幅を設定します

    column-rule-widthを使用します 列間のルールの幅を設定するプロパティ。 例 次のコードを実行して、column-rule-widthプロパティを実装してみてください。 <!DOCTYPE html> <html>    <head>       <style>          .demo {             column-count: 4;   &nb