CSS - calc()'ın istenilen işlevi yerine getirememesi

ai.Wxby

Hectopat
Katılım
11 Nisan 2016
Mesajlar
185
Çözümler
1
Merhabalar,

Üzerinde çalıştığım projede bir kısmı halledemiyorum. Çok uğraştım çözmek için ama bir türlü algılayamıyorum. Nerede hata yaptığımı anlayamadım. Bir de size danışmak istedim. Yapmak istediğim şey; div içerisine her satırda 3 kart olacak şekilde dizilim yapmak.

HTML yapım:
2021-09-25_21-12-14.png


content-demos (kapsayıcı div):
2021-09-25_21-14-09.png


demo kartı:
2021-09-25_21-12-44.png

Not: Rahat rahat anlayabilin diye renkleri daha canlı yaptım.

Yorum satırı haline ya da bulanık hale getirdiklerim test aşamasında yazdığım ya da sorunla alakası olmayan kısımlar. Sorun olduğunu düşündüğüm kısımları gösterdim. Tarayıcıda çalıştırdığım ortaya çıkan görüntü böyle:
2021-09-03_22-35-31.png


Mor (content-demos yani kapsayıcı div) alan:
İç boşluk olarak 5 piksel verdim ki kartlar köşelere yaslanmasın. Gap vermemim amacıysa kartlar arasında 5 piksellik boşluk istemem. Bunun sebebi de kartların birbirine yapışmasını önlemek.

Pembe (kart) alan:
İç boşluğu 10 piksel verdim ki içerik, card alanının köşelerine yapışmasın. Gelelim en önemli kısım olan width değerine; amacım satır başına 3 kart koyabilmek. Bunun için kart elemanlarının genişlik değerini 100% / 3 yaptım. Normalde kartın, kapsayıcı alanındaki kalan genişliğe 100% yayılması, ondan sonra da kalan piksel değerini 3'e bölerek kendi genişliğine aktarması lazım. Fakat burada bunu yapmıyor. Hiçbir şekilde tek satırda 3 kartı yerleştiremiyorum.

Çözmek için kapsayıcı alandaki (content-demos) gap değerini kaldırdım ve her şey istediğim gibi oldu. Ama gap değerini kaldırınca da bu sefer kartlar yapışık oluyor. Başka çözüm yolu olarak kartlara margin değerini atadım fakat değişen bir şey olmadı. Yine satır başına 2 karta düştü. Ne yaparsam yapayım kartlara boşluk verdiğim an her şey bozuluyor. Her şeyi denedikten sonra aklıma kartların genişliğini ayarlamak geldi. Eğer kartların genişliğini cal(100% / 3) ile değil de kendi manuel olarak verirsem şunlar oluyor;

- width: 33.33% olduğunda değişen bir şey olmuyor, zira aynı işlemi manuel olarak yapıyorum.
- width: 33% olduğunda işler biraz değişiyor. Her şey tamam gibi oluyor. Kartlar arası boşluk, ana alan boşluğu, satır başına 3 kart... Kısaca her şey tamam gibi görünüyor fakat şöyle bir görüntü ortaya çıkıyor:

2021-09-25_21-33-10.png

Kapsayıcı alanın sağ tarafına ekstra boşluk ekleniyor çünkü kart genişliği 33.33 * 3'ten 99.99 değil; 33 * 3'ten 99 oluyor. Dikkatli bakıldığında sağ taraf boşluğunun, sol taraf boşluğundan daha geniş olduğu görülebilir. Bu benim gibi takıntılı bir insanı çok sinirlendiriyor. Dahası, tarayıcının genişliğini daraltmaya başladığımda bu sefer yine satır başına 2 ye düşüyor:
2021-09-25_21-33-29.png

Ben genişlikleri piksel değerinden verseydim evet, query'lerle birlikte çözünürlüğe göre ayarlamam gerekirdi fakat hem % birimi hem de calc() kullanıyorum. Buna rağmen otomatik ayarlarken sapıtıyor.

Benim göremediğim ne var acaba? Yardımcı olabilir misiniz lütfen? Şu an meşgulüm belki bu gece dönemeyebilirim ama sabah kesinlikle yazdıklarınıza döneceğim. Şimdiden teşekkürler. 🤗
 

Yeniçocuk

Hectopat
Katılım
30 Kasım 2018
Mesajlar
1.561
Çözümler
1
Keyfi web siteleri ile uğraşırken genelde container div özelliğini display:flex; justify-content: space-between; container için Max-width değeri ve margin 0 Auto özelliği kullanıp container içindeki divlerin genişliğini %33 verince bende 3 tane gözükmüş oluyor.
 
Yukarı