Çapraz Görüntüyle Metin Nasıl Hizalanır

Bir OSTraining müşterisi, her iki öğe arasında boşluk bırakarak metni çapraz bir görüntünün yanına hizalamanın bir yolunu istedi.

İlk düşüncem metnin belirli noktalarına kesme çizgileri eklemekti, ancak site duyarlı olduğu için bu işe yaramadı.

Müşteri ile görüştükten sonra daha şık bir çözüm bulduk...

kullanım durumu

Bu örnekte, metnin sola, görüntünün de sağa hizalanması gerekir. Buradaki asıl zorluk, metnin görüntünün üzerine binmemesi gerektiğidir. İstediğimiz sonuç aşağıda gösterilmiştir:

Çözüm

Metni resmin üzerine bindirmemeye zorlamak için dinamik genişlik değerleriyle sağda kayan boş div'ler ekleyebiliriz. Bu örnekte görüntünün CSS ile arka plan olarak eklendiğini unutmayın.

HTML

Bu örneğin HTML'si şu şekilde görünür:

 <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>

Boşluk sınıfı ile birden fazla boş div'i fark edebilirsiniz. Bazı CSS ile birlikte bu öğeler, metin ve görüntü arasındaki boşluğu oluşturur.

Boşluk div sayısı, görüntünün yüksekliğini doldurmak için gereken metin satırı sayısına eşittir. Bu örnekte görüntünün 14 satırla kaplanması gerekiyor.

CSS

Daha iyi bir açıklama için gerekli CSS'yi birkaç parçaya böleceğim.

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

Resmi belirli bir konum ve boyuta sahip arka plan olarak tanımlar.

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

#container p seçicisi metne referans yapar. Diğer özelliklerin değerlerini daha sonra hesaplamak için yazı tipi boyutunu ve satır yüksekliğini tanımlamak çok önemlidir.

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

Bu özellik, boş div'lerin sağda yüzmesini söyler. Yükseklik değerinin paragraflarda satır yüksekliği için kullandığımız değerle aynı olduğuna dikkat edin.

 .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; }

Yukarıdaki kod, bir hesap makinesi kullanmayı gerektirebilecek eğlenceli kısımdır.

.spacing:nth-child(1) için seçilen genişlik değeri, boşluk sınıfıyla ilk div için geçerli olacaktır, aynı şekilde .spacing:nth-child(2) biraz daha küçük bir genişlik tanımlar ve boşluk öğesine ulaşana kadar böyle devam eder. 14 numara.

Sağdaki her boş div için yukarıdan aşağıya dinamik değerler tanımlamanın nedeni, görüntünün üst üste bindirilmeden metni sola hizalı tutmayı mümkün kılar.

Bununla birlikte, bu boş div'lerin her birinin genişliğini nasıl hesaplayabiliriz? Cevap, aşağıdaki değerlere dayalı küçük bir formül gerektirir:

• metin için satır yüksekliği (örneğimde 22 piksel)
• arka plan boyutu (bu örnekte 300 piksel)

İlk boş div için genişlik 305 pikseldir; bu, tanımlanan arka planın genişliğinin değeri artı metnin görüntünün kenarına çok yakın olmasını önlemek için eklemeye karar verdiğim 5 ekstra pikseldir.

Duyarlı destek

Örnek kodu kullanarak tasarım herhangi bir ekran boyutunda düzgün çalışacaktır. Demoya bir göz atın ve çalışırken görmek için tarayıcıyı yeniden boyutlandırın.

Bir demo görün

Bonus: DAHA AZ

Doğrudan CSS'ye gitmenin bir alternatifi LESS'tir. LESS konusunda yeniyseniz bir eğitimimiz var.

Aynı sonucu, matematik konusunda endişelenmeden, boşluk sınıfına sahip her div için birden çok genişlik değerini dinamik olarak oluşturmak için LESS kullanarak da oluşturabilirsiniz.

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

Değişkenler aracılığıyla metnin yüksekliğini ve arka plan genişliğini belirleyin.

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

Konteynerin özellikleri.

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

Bazı değişkenlere göre dinamik olarak hesaplanan metin ve boşluk özellikleri.

 .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);

Tüm boş div'ler için dinamik genişliği oluşturan döngü.

Bu kodu Codepen'de test edin