Afficher les divs en ligne l'un à côté de l'autre avec CSS + centré, IE8

MISE À JOUR: Il s'avère que la réponse de Bart est la bonne. 4 * 64 + 8 * 1 = 264px div large pour contenir les autres divs et leurs frontières 1px donne exactement l'effet que je voulais. J'ai modifié mon code d'échantillon pour contenir sa réponse. Merci Bart.Afficher les divs en ligne l'un à côté de l'autre avec CSS + centré, IE8

Je me bats, encore une fois, avec CSS. Cet exemple montre 1,2,3,4 à la taille que je les veux en utilisant une table. Lorsque j'essaie de faire la même chose avec CSS, la div se réduit à la taille du contenu plutôt qu'à la hauteur/largeur spécifiée. Navigateur cible: IE8

<!doctype html> 
<html> 
<head> 
<style type="text/css" media="screen"> 
#one, #two, #three, #four, #five, #six, #seven, #eight 
{ 
    height: 64px; width: 64px; 
    border: 1px solid black; 
    background-color: lightgreen; 
} 
#five, #six, #seven, #eight { float:left; } 
#cont {width:264px;} 
</style> 
</head> 
<body> 
<center> 

<table><tr> 
<td><div id="one">1</div></td> 
<td><div id="two">2</div></td> 
<td><div id="three">3</div></td> 
<td><div id="four">4</div></td> 
</tr></table> 

<div id="cont"> 
<div id="five">5</div> 
<div id="six">6</div> 
<div id="seven">7</div> 
<div id="eight">8</div> 
</div> 

</center> 
</body> 
</html>

Source

2009-10-23 Andrew

Ajoutez un remplissage et une marge, sinon le navigateur ignore la hauteur et la largeur.

Bon travail en essayant de pas utiliser des tableaux pour la mise en page!

Source

2009-10-23 18:23:05

Quelles sont les valeurs de remplissage dois-je ajouter pour atteindre la hauteur/largeur de 64px indépendante de le texte dans la div? – Andrew

Je commence avec quelques pixels et joue avec les nombres dans firebug. Généralement, la largeur finale devra être un peu plus petite, ymmv. Faites le moi savoir. –

Je l'ai essayé, mais ce que je me retrouve avec une quantité de rembourrage autour du contenu de la DIV. Donc, comme le contenu DIV varie en taille, ainsi la taille totale. Mais j'ai besoin précisément de 64 hauteur/largeur. – Andrew

les initialisant à display: inline les transforme en en ligne éléments qui ne jouent pas bien avec width, height, et d'autres propriétés du modèle de boîte qui sont destinés à bloc éléments, dont le div est par défaut.

Si vous souhaitez définir leurs largeurs et hauteurs, et que vous voulez les uns à côté des autres, essayez ceci:

#five, #six, #seven, #eight { 
    float: left; 
    height: 64px; 
    width: 64px; 
    border: 1px solid black; 
    background-color: lightgreen; 
}

Source

2009-10-23 18:45:27

Cela fonctionne mais pousse les divs à l'extrême gauche de l'écran. Comment puis-je les faire conserver leur taille, être l'un à côté de l'autre mais être toujours centré sur la page? Je ne suis pas marié à divs. Pourrait passer à des travées si elles fonctionneraient mieux. – Andrew

Pour centrer ces divs sur la page, vous pouvez ajouter les CSS suivants au DIV entourant les cinq, six, sept et huit div: {width: 256px; margin: 0 auto;} – Bart

Afficher les divs en ligne l'un à côté de l'autre avec CSS + centré, IE8

Répondre

Questions connexes