div container 6 satır öğesini sonraki satırda itti

Question

6 resim içeren bir div kabı oluşturmak istiyorum. Bu kapsayıcı içinde

daha sonra 6 resim olmalı, bu yüzden css içinde :nth-child() seçici kullandı: İşte bir görüntüdür. Benim problemim şu ki, 6. görüntü bir sonraki satırda zorlanıyor ve nedenini bilmiyorum.

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
div{ 
 
    width: 750px; 
 
    background-color: grey; 
 
} 
 

 
div > a{ 
 
    display: inline-block; 
 
    height: 120px; 
 
    width: 120px; 
 
    max-height: 120px; 
 
    max-width: 120px; 
 
    margin-right: 6px; 
 
} 
 

 
div > a:nth-child(6n){ 
 
    margin-right: 6px; 
 
} 
 

 
div > a > img{ 
 
    height: 120px; 
 
    width: 120px; 
 
    max-height: 120px; 
 
    max-width: 120px; 
 
}

<div> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
</div>

İşte

bir JSFiddle

Answer 1

Beyaz boşluk marjı sorunu + CSS kuraldır div > a:nth-child(6n)

Src'dir: https://davidwalsh.name/remove-whitespace-inline-block

İşte

kodudur

Ayrıca, div > a:last-child kullanarak, istediğiniz sayıda öğe olmasına ve her zaman en son hedefi kullanmanıza izin verir. Tüm büyük/yeni tarayıcılar bunu destekleyecek şekilde

flex

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
div{ 
 
    width: 750px; 
 
    background-color: grey; 
 
} 
 

 
div > a { 
 
    display: inline-block; 
 
    height: 120px; 
 
    width: 120px; 
 
    max-height: 120px; 
 
    max-width: 120px; 
 
    margin-right: 6px; 
 
} 
 

 
div > a:last-child { 
 
    margin-right: 0px; 
 
} 
 

 
div > a > img{ 
 
    height: 120px; 
 
    width: 120px; 
 
    max-height: 120px; 
 
    max-width: 120px; 
 
}

<div> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a><a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a><a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a><a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a><a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a><a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
</div>

, bugün bunu çözmek için önerilen bir yol olacaktır.

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
div{ 
 
    width: 750px; 
 
    background-color: grey; 
 
    display: flex; 
 
} 
 

 
div > a { 
 
    display: inline-block; 
 
    height: 120px; 
 
    width: 120px; 
 
    max-height: 120px; 
 
    max-width: 120px; 
 
    margin-right: 6px; 
 
} 
 

 
div > a:last-child { 
 
    margin-right: 0px; 
 
} 
 

 
div > a > img{ 
 
    height: 120px; 
 
    width: 120px; 
 
    max-height: 120px; 
 
    max-width: 120px; 
 
}

<div> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
    <a> 
 
    <img src="http://lorempixel.com/120/120/"/> 
 
    </a> 
 
</div>

Answer 2

aşağıda div genişliğini değiştirmek edin: cevap için

div { 
    background-color: grey; 
    width: 782px; 
}