Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan panjang dalam CSS untuk menetapkan jurang antara lajur?

Bagaimana untuk menetapkan panjang dalam CSS untuk menetapkan jurang antara lajur?

王林ke hadapan: 2023-09-04 11:45:021081semak imbas

CSS ialah alat berkuasa dalam pembangunan web yang membolehkan pembangun membuat reka letak berbilang lajur untuk kandungan teks pada halaman web. Lajur ialah cara yang berkesan untuk memecahkan blok panjang teks kepada bahagian yang lebih mudah diurus. Aspek penting lajur CSS ialah jurang antara mereka.

Cara berbeza untuk menetapkan jarak lajur dalam CSS

Berikut ialah beberapa daripada banyak cara untuk menetapkan jurang antara lajur dalam CSS.

1. Gunakan atribut ruang-jurang

sifat ruang-jurang ialah cara paling biasa untuk menetapkan jurang antara lajur. Sifat ini menetapkan jarak antara lajur dalam reka letak berbilang lajur. Ia ialah sifat trengkas yang menggabungkan sifat lajur-peraturan-lebar dan lajur-peraturan-gaya. Contohnya -

.column-container {
   column-count: 3;
   column-gap: 20px;
}

Dalam kod CSS di atas, untuk membuat tiga lajur, kami menetapkan sifat kiraan lajur kepada 3 dan sifat jurang lajur kepada 20 piksel untuk menetapkan jurang tengah.

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Tetapkan nilai piksel tetap untuk jurang lajur.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         background-color: lightgray;
      }
      h2 {
         text-align:center;
      }
      .column-container {
         column-count: 3;
         column-gap: 20px;
         column-rule: 3px solid;
      }
   </style>
</head>
<body>
   <h2>Setting the column gap using the column-gap Property</h2>
   <div class="column-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
   </div>
</body>
</html>

2. Gunakan atribut gap

Harta gap ialah sifat CSS baharu yang diperkenalkan dalam Grid CSS. Kami juga boleh menggunakannya untuk menetapkan jarak antara lajur. Ini ialah atribut singkatan yang membolehkan pembangun menggabungkan atribut baris-jurang dan ruang-jurang bersama-sama. Contohnya -

.column-container {
   column-count: 4;
   gap: 15px;
}

Dalam kod CSS di atas, untuk membuat empat lajur, kami menetapkan sifat kiraan lajur kepada 4 dan sifat jurang lajur kepada 15 piksel untuk menetapkan jurang tengah.

Contoh 2

Gunakan atribut jurang untuk menetapkan nilai piksel tetap untuk jurang lajur.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: lightgreen;
      }
      h2 {
         text-align: center;
      }
      .column-container {
         column-count: 4;
         gap: 15px;
         column-rule: 3px dotted;
      }
   </style>
</head>
<body>
   <body>
      <h2>Setting the column gap using the gap Property </h2>
      <div class="column-container">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </div>
   </body>
</body>
</html>

3. Menggunakan pembolehubah CSS

Pembolehubah CSS ialah sifat tersuai yang menyediakan cara yang fleksibel untuk menetapkan jurang antara lajur dalam reka letak berbilang lajur. Ia membolehkan pembangun mentakrifkan nilai boleh guna semula. Contohnya:

:root {
   --column-gap: 20px;
}
.column-container {
   column-count: 3;
   column-gap: var(--column-gap);
}

Dalam kod CSS di atas, kami menentukan pembolehubah CSS yang dipanggil --column-gap dan menetapkan nilainya kepada 20 piksel dan memanggilnya dalam fungsi var(). Untuk membuat tiga lajur, kami menetapkan sifat kiraan lajur kepada 3.

Terjemahan bahasa Cina bagi

Contoh 3

ialah:

Contoh 3

Gunakan pembolehubah CSS untuk menetapkan nilai piksel tetap untuk jarak lajur.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         background-color: lightgray;
      }
      h2 {
         text-align:center;
      }
      .my-container {
         column-count: 3;
         column-gap: var(--column-gap);
         column-rule: 3px dotted;
      }
   </style>
</head>
<body>
   <h2>Setting the column gap using the CSS variable</h2>
   <div class="my-container"  style="--column-gap: 20px";>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
   </div>
</body>
</html>

Kesimpulan

Dalam artikel di atas, kami membincangkan beberapa cara untuk menetapkan jurang lajur antara lajur, termasuk atribut ruang-jurang, atribut jurang dan pembolehubah CSS. Secara keseluruhan, menetapkan jurang antara lajur dalam CSS ialah teknik yang berguna untuk mengatur kandungan web.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan panjang dalam CSS untuk menetapkan jurang antara lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css count var column

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Harta pembungkus perkataan CSSArtikel seterusnya：Harta pembungkus perkataan CSS

Artikel berkaitan

Lihat lagi