Django ve html pinterest tarzı

Python Django
,
1

index.html

{% for blog in blogs %}

<style>
  .yan_yana{
    display:inline-flex;
}
</style>


<div class = 'yan_yana'>
<br>
    <img src="{{ blog.resim.url }}" alt="Card image" style="width:16rem;">
</div>



{% endfor %}

Screenshot_2
Screenshot_21847×777 163 KB

pinterest tarzı bir site yapmak istiyorum. alttaki fotograflar üstteki fotografların altına 3-4 cm kadar aralıklı olmasını istiyorum. ancak benim koddakiler hepsi aynı hizada. nasıl yapıcam yardım eder misiniz?

2

Merhaba, aşağıdaki HTML ve CSS kodlarını inceleyebilirsiniz.

HTML

<div class="container">
	<div class="grid">
		<img src="https://source.unsplash.com/random/1">
	</div>

	<div class="grid">
		<img src="https://source.unsplash.com/random/2">
	</div>
</div>

CSS

.grid {
	margin-bottom: 20px;
	position: relative;
	width: 100%;
}

.grid img {
	width: 100%;
}

.container {
	columns: 6;
	column-gap: 16px;
}

https://jsfiddle.net/uc9Lxyja/

3

hocam cevabınız için çok teşekkürler ama neden bilmem bu seferde tek sıra halinde alt alta indi hepsi. for döngüsü kullanıyorum yuklenen postları cekmek için acaaba ondan dolayı mıdır. eger ondan dolayıysa cekmenın farklı bi yontemi var mı?

4

For döngüsünü yanlış yerde başlatmışsınız gibi görünüyor.

Bu şekilde olmalı.

<div class="container">
{% for blog in blogs %}
<div class="grid">
		<img src="https://source.unsplash.com/random/1">
	</div>
{% endfor %}
</div>
1 Beğeni
5

hocam çok teşekkür ederim oldu sonunda rahat bir uyku uyuyabilirim :sweat_smile: :sleepy:

edit: hocam denedim sorunsuz çalışıyor ancak fotolar kucuk ve soldan ve sagdan girintiler fazla onları nasıl ayarlarım kodları kurcaladım biraz ancak bi sonuca varamadım

6

CSS kodlarındaki column-gap’ı düşürebilirsiniz. Ne kadar yüksek olursa sağdan ve soldan boşluk o kadar fazla oluyor. Ayrıca columns: 6 yazan kısım da yan yana kaç resim görüneceğini belirliyor. Onu da düşürebilirsiniz.

7

teşekkürler sabit .container yerine .container1 olarak tanımladım şu anlık işimi görüyor gibi.