Pourquoi ces divs ne sont-ils pas alignés et espacés?

Pourquoi tout n'est-il pas aligné? Aucun jaune ne devrait être visible et aucune orange ne devrait être visible sauf pour le côté droit et le coin inférieur gauche où il y a de l'espace pour une autre image.Pourquoi ces divs ne sont-ils pas alignés et espacés?

Fondamentalement, mes images sont assez alignées sur le centre (j'ai d'autres photos qui ne sont pas dans cet exemple, ce qui est plus facile à voir). Cependant dans ce cas quand j'ai l'image de la taille 150px la largeur 150 semble commencer plus bas. Aussi pourquoi y at-il des espaces entre

http://i42.tinypic.com/2jag1w7.jpg http://i42.tinypic.com/2jag1w7.jpg

alt text http://i41.tinypic.com/14jyv88.jpg alt text http://i40.tinypic.com/25506e1.jpg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>ldfk;sd</title> 
<style type="text/css"> 



div.ImgGallery 
{ 
    max-width: 630px; 
    background: orange; 
} 

.ImgGallery div 
{ 
    display: inline; 
} 
/* http://www.brunildo.org/test/img_center.html */ 
.ImgGallery div div 
{ 
    display: table-cell; 
    text-align: center; 
    background: gray; 
    width: 150px; 
    height: 150px; 
} 

.ImgGallery div{ 
background: yellow; 
vertical-align: middle; 


} 
//.ImgGallery div div :nth-child(2n+1) { background: red; } 
.ImgGallery * { 
    vertical-align: middle; 
} 

.ImgGallery a 
{ 
    display: block; 
} 
.ImgGallery a * 
{ 
    border-style: none; 
} 


</style> 
</head> 
<div class="smallGallery"> 
<div class="ImgGallery"> 

<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="b.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="b.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 
<div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> 

</div></div> 

</body></html>

Source

2010-03-20 Anonymous

Voici le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Przykładowy dokument</title> 
    <style type="text/css"> 
     * { 
      margin: 0; 
      padding: 0; 
     } 

     li { 
      list-style-type: none; 
     } 

     a img { 
      border: none; 
     } 

     #gallery { 
      width: 650px; 

      background: orange; 
     } 

     #gallery li { 
      display: inline-block; 

      background: yellow; 
      border: 1px solid black; 
     } 

     #gallery img { 
      vertical-align: middle; 
     } 
    </style> 
    <script type="text/javascript"></script> 
</head> 
<body> 
    <ul id="gallery"> 
     <li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li 
     ><li><a href="#"><img src="http://i41.tinypic.com/14jyv88.jpg" /></a></li 
     ><li><a href="#"><img src="http://i40.tinypic.com/25506e1.jpg" /></a></li> 
    </ul> 
</body> 
</html>

Et voici l'explication:

Gallery est une sorte de liste de sorte qu'il devrait être présenté dans le code comme une liste.
Ces espaces vides entre les images étaient causés par le fait que les images étaient traitées en tant qu'éléments en ligne. Et vous devriez savoir qu'un ou plusieurs caractères blancs (espace, entrée, tabulation et ainsi de suite) entre les éléments en ligne dans le code sont présentés comme un seul espace dans le navigateur. C'est la même situation que lors de l'écriture d'un texte (qui est en ligne).
L'alignement vertical peut être obtenu en utilisant la propriété vertical-align.

Source

2010-03-20 11:27:35 Crozin

Je ne pouvais pas obtenir l'alignement vertical travaillant dans le li. Mais j'ai modifié le code et suis allé en arrière et l'ai aligné correctement. Actuellement theres pas li (il a gardé un contour noir et je ne pouvais pas l'enlever même après la frontière: aucun) et utiliser divs. Ça a l'air bien maintenant. Merci :) –

nevermind je vois la frontière css –

Essayez les modifications suivantes, Espérons que c'est ce que votre regardez, si vous voulez pas de couleur jaune à afficher l'utilisation float propriété de CSS.

.ImgGallery div 
{ 
    display: inline-block; 
} 

.ImgGallery div div 
{ 

/*display: table-cell; 
*/ 
text-align: center; 
background: gray; 
width: 150px; 
height: 150px; 

}

Un problème différent est que votre code semble échouer aux normes. Essayez ce lien http://validator.w3.org/#validate_by_input

Source

2010-03-20 11:26:21 questzen

Ceci est un test rapide. Mon vrai html est valide et je ne répare pas html sur les throwaways. –

Pourquoi ces divs ne sont-ils pas alignés et espacés?

Répondre

Questions connexes