Cara Menyejajarkan Teks Dengan Gambar Diagonal

Seorang pelanggan OSTraining meminta cara untuk menyelaraskan teks di sebelah gambar diagonal, sambil menjaga jarak di antara kedua elemen.

Pikiran pertama saya adalah menambahkan breaklines pada titik-titik tertentu dari teks, namun itu tidak berhasil karena situsnya responsif.

Setelah berbicara dengan pelanggan, kami menemukan solusi yang lebih elegan ...

Kasus penggunaan

Dalam contoh ini, teks perlu disejajarkan ke kiri, dan gambar ke kanan. Tantangan sebenarnya di sini adalah bahwa teks tidak boleh menutupi gambar. Hasil yang kita inginkan ditunjukkan di bawah ini:

Solusinya

Kita dapat menambahkan div kosong yang mengambang di sebelah kanan dengan nilai lebar dinamis untuk memaksa teks agar tidak menutupi gambar. Catatan, dalam contoh ini gambar ditambahkan sebagai latar belakang dengan CSS.

HTML

HTML untuk contoh ini terlihat seperti ini:

 <div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <div class="spacing"></div>    <p>A buch of dummy text goes here...</p> </div>

Anda dapat melihat beberapa div kosong dengan kelas spasi . Elemen-elemen tersebut dalam kombinasi dengan beberapa CSS menghasilkan jarak antara teks dan gambar.

Jumlah div spasi sama dengan jumlah baris teks yang diperlukan untuk mengisi tinggi gambar. Dalam contoh ini gambar perlu ditutup dengan 14 garis.

CSS

Saya akan membagi CSS yang diperlukan menjadi beberapa bagian untuk penjelasan yang lebih baik.

 #container {  background-image: url(bg.png);  background-repeat: no-repeat;  background-position: right top;  background-size: 300px auto;  min-height: 300px; }

Mendefinisikan gambar sebagai latar belakang dengan posisi dan ukuran tertentu.

 #container p {  line-height: 22px;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  font-size: 14px; }

#container p pemilih membuat referensi ke teks. Sangat penting untuk menentukan ukuran font dan tinggi garis untuk menghitung nilai properti lain nanti.

 .spacing {  float: right;  clear: right;  height: 22px; }

Properti ini memberi tahu div kosong untuk mengapung di sebelah kanan. Perhatikan, nilai tinggi sama dengan yang kita gunakan untuk tinggi garis di paragraf.

 .spacing:nth-child(1) {  width: 305px; } .spacing:nth-child(2) {  width: 283px; } .spacing:nth-child(3) {  width: 261px; } .spacing:nth-child(4) {  width: 239px; } .spacing:nth-child(5) {  width: 217px; } .spacing:nth-child(6) {  width: 195px; } .spacing:nth-child(7) {  width: 173px; } .spacing:nth-child(8) {  width: 151px; } .spacing:nth-child(9) {  width: 129px; } .spacing:nth-child(10) {  width: 107px; } .spacing:nth-child(11) {  width: 85px; } .spacing:nth-child(12) {  width: 63px; } .spacing:nth-child(13) {  width: 41px; } .spacing:nth-child(14) {  width: 19px; }

Kode di atas adalah bagian menyenangkan yang mungkin diperlukan untuk menggunakan kalkulator.

Nilai lebar yang dipilih untuk .spacing:nth-child(1) akan diterapkan ke div pertama dengan kelas spasi, dengan cara yang sama .spacing:nth-child(2) mendefinisikan lebar yang sedikit lebih kecil dan seterusnya hingga mencapai elemen spasi nomor 14.

Alasan untuk menentukan nilai dinamis dari yang lebih tinggi ke yang lebih rendah ke setiap div kosong di sebelah kanan memungkinkan teks tetap sejajar ke kiri tanpa overlay gambar.

Karena itu, bagaimana kita bisa menghitung lebar masing-masing div kosong itu? Jawabannya membutuhkan rumus kecil berdasarkan nilai:

• line-height untuk teks (22px dalam contoh saya)
• background-size (300px dalam contoh ini)

Lebar untuk div kosong pertama adalah 305px, yang merupakan nilai lebar latar belakang yang ditentukan ditambah 5 piksel ekstra yang saya putuskan untuk disertakan untuk menghindari teks terlalu dekat ke tepi gambar.

Dukungan responsif

Menggunakan kode contoh, desain akan berfungsi dengan baik dalam ukuran layar apa pun. Lihatlah demo dan ubah ukuran browser untuk melihatnya beraksi.

Lihat demo

Bonus: KURANG

Salah satu alternatif untuk langsung ke CSS adalah KURANG. Kami memiliki tutorial jika Anda baru mengenal KURANG.

Anda dapat menghasilkan hasil yang sama menggunakan KURANG untuk secara dinamis membuat beberapa nilai lebar untuk setiap div dengan kelas spasi dengan mudah tanpa mengkhawatirkan matematika.

 @textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;

Tentukan tinggi untuk teks dan lebar latar belakang melalui variabel.

 #container {    background-image: url(bg.png);    background-repeat: no-repeat;    background-position: right top;    background-size: @backgroundWidth auto;    min-height: @backgroundWidth; }

Properti wadah.

 #container p {    line-height: @textHeight;    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;    font-size: @textHeight - 8; } .spacing {    float: right;    clear: right;    height: @textHeight; }

Properti teks dan spasi dihitung secara dinamis berdasarkan beberapa variabel.

 .generate-spacing(@i, @end) when (@i <= @end) {    .spacing:nth-child(@{i}) {        width: @initialWidth - ((@i - 1) * @textHeight);    }    .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);

Loop yang menghasilkan lebar dinamis untuk semua div kosong.

Uji kode ini di Codepen