Rumah > Artikel > hujung hadapan web > Bagaimanakah saya boleh menjajarkan teks dalam CSS supaya kedua-dua lajur kekal lurus?

Bagaimanakah saya boleh menjajarkan teks dalam CSS supaya kedua-dua lajur kekal lurus?

王林ke hadapan: 2023-09-15 16:45:03823semak imbas

CSS (Cascading Style Sheets) ialah bahasa helaian gaya yang digunakan untuk menentukan rupa dan pemformatan dokumen HTML. Dengan mengasingkan persembahan kandungan daripada struktur halaman web, CSS membolehkan anda mengawal reka letak, warna, fon dan gaya lain tapak web anda.

Anda boleh menggunakan paparan: sifat jadual CSS untuk membina struktur seperti jadual untuk menjadikan kedua-dua lajur lurus apabila menjajarkan teks dalam CSS. Kemudian, apabila menggunakan paparan: atribut sel jadual, tetapkan atas atau bawah sebagai atribut penjajaran menegak untuk setiap lajur untuk menjajarkan teks dengan sewajarnya.

Kaedah

Berikut ialah beberapa cara biasa untuk menjajarkan teks dalam CSS -

Gunakan sifat penjajaran teks
Gunakan atribut paparan
Gunakan sifat terapung

Sekarang mari kita fahami setiap kaedah secara terperinci dengan contoh.

Kaedah 1: Gunakan atribut “text-align”

Cara pertama untuk menjajarkan teks (kedua-dua lajur adalah lurus) dalam CSS ialah menggunakan sifat "text-align". Teks dalam elemen bekas boleh dijajarkan menggunakan sifat penjajaran teks. Ia menerima nilai seperti tengah, kiri dan sejajar.

Contoh

Dalam contoh berikut, kita akan belajar cara menjajarkan teks dalam CSS menggunakan sifat “text-align”

Langkah 1 - Buat elemen bekas dalam HTML seperti div -

<div class="container">
   <!-- Your content goes here -->
</div>

Langkah 2 - Buat dua elemen anak untuk dua lajur di dalam elemen bekas -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Langkah 3− Gaya CSS hendaklah ditambahkan pada elemen kontena dan lajur −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
   text-align: left;
}
.right-col {
   width: 49%;
   text-align: right;
}

Langkah 4 - Isi elemen lajur dengan kandungan -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Langkah 5 - Anda boleh melihat teks yang disusun dalam dua lajur lurus dengan melihat pratonton keputusan dalam penyemak imbas komputer anda.

Langkah 6 - Kod akhir kelihatan seperti ini -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
         text-align: left;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Kaedah 2: Gunakan "atribut paparan"

Untuk membina reka letak yang fleksibel, tetapkan sifat paparan kepada lentur atau grid. Menggunakan sifat justify-content dan align-item, anda boleh mengurus kedudukan elemen dalam mod reka letak yang berbeza.

Contoh

Dalam contoh berikut, kita akan belajar cara menjajarkan teks dalam css menggunakan atribut paparan

Langkah 1 - Buat elemen bekas dalam HTML seperti div -

<div class="container">
   <!-- Your content goes here -->
</div>

Langkah 2 - Buat dua elemen anak untuk dua lajur di dalam elemen bekas -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Langkah 3− Gaya CSS hendaklah ditambahkan pada elemen kontena dan lajur −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
}
.right-col {
   width: 49%;
}

Langkah 4 - Isi elemen lajur dengan kandungan -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Langkah 5 - Anda boleh memerhati teks yang disusun dalam dua lajur lurus dengan melihat pratonton keputusan dalam penyemak imbas komputer anda.

Langkah 6 - Kod akhir kelihatan seperti ini -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Kaedah 3: Gunakan "atribut terapung"

Menggunakan atribut apungan, elemen boleh diapungkan ke sebelah kiri atau kanan bekas induknya. Anda boleh menggunakannya untuk membuat teks yang dijajarkan dalam berbilang lajur untuk mencipta reka letak berbilang lajur.

Contoh

Dalam contoh berikut, kita akan belajar cara menjajarkan teks dalam CSS menggunakan sifat Float

Langkah 1 - Buat elemen bekas dalam HTML seperti div -

<div class="container">
   <!-- Your content goes here -->
</div>

Langkah 2 - Buat dua elemen anak untuk dua lajur di dalam elemen bekas -

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Langkah 3− Gaya CSS hendaklah ditambahkan pada elemen kontena dan lajur −

.left-col {
   width: 49%;
   float: left;
   text-align: left;
}
.right-col {
   width: 49%;
   float: right;
   text-align: right;
}

Langkah 4 - Isi elemen lajur dengan kandungan -

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Langkah 5 - Anda boleh memerhati teks yang disusun dalam dua lajur lurus dengan melihat pratonton keputusan dalam penyemak imbas komputer anda.

Langkah 6 - Kod akhir kelihatan seperti ini -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .left-col {
         width: 49%;
         float: left;
         text-align: left;
      }
      .right-col {
         width: 49%;
         float: right;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Kesimpulan

Kedua-dua atribut penjajaran teks dan atribut paparan dalam CSS boleh menjajarkan teks ke dalam dua lajur tegak. Atribut paparan menunjukkan reka letak elemen, seperti sama ada ia perlu dipaparkan sebagai elemen peringkat blok atau elemen sebaris.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menjajarkan teks dalam CSS supaya kedua-dua lajur kekal lurus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html Float 样式表 display flex table

Kenyataan：

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

Artikel sebelumnya：Bagaimanakah kita boleh menggunakan kelas CSS yang berbeza dalam HTML?Artikel seterusnya：Bagaimanakah kita boleh menggunakan kelas CSS yang berbeza dalam HTML?

Artikel berkaitan

Lihat lagi