Comment obtenir une largeur de fluide et un espacement uniforme pour quatre DIV dans un conteneur ?

Largeur fluide avec des DIV équidistants

Question :

Vous disposez d'un conteneur de largeur fluide DIV avec quatre DIV, chacun avec des dimensions fixes. Comment pouvez-vous faire flotter la case 1 vers la gauche, la case 4 vers la droite et espacer les cases 2 et 3 de manière égale entre elles, en maintenant un espacement fluide à mesure que la taille de la fenêtre du navigateur change ?

**Réponse :

Référez-vous au JSFiddle fourni pour un exemple complet : http://jsfiddle.net/thirtydot/EDp8R/

Explication :

Cette solution utilise plusieurs techniques pour obtenir la mise en page souhaitée :

• text-align: justifier;: Cela aligne les DIV horizontalement, en répartissant l'espace entre eux.
• .stretch : Une étendue avec une largeur définie à 100 %. Il s'agrandit pour remplir la largeur restante du conteneur.
• display:inline-block; *affichage : en ligne ; zoom:1;: Garantit le comportement du bloc en ligne pour IE6/7.
• font-size : 0 ; line-height: 0;: Empêche l'espace vertical causé par le bloc en ligne dans IE6.

En combinant ces techniques, les DIV sont positionnés de manière fluide, uniformément espacées et flottantes comme vous le souhaitez, quel que soit le la largeur du conteneur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!