Disposer 2, 3 ou DIV Beaucoup côte à côte avec CSS Float

Savoir comment positionner et organiser deux, trois ou plusieurs DIV éléments côte à côte. alignement DIV et le placement est facile avec l'utilisation de la propriété CSS float.

A+ A-

élément DIV en HTML est utilisé pour créer des couches flottantes. Dans la conception et le développement web moderne , la pensée d'un site sans éléments DIV est presque inexistante.

Newbies, cependant, trouver certains aspects de la DIV est un peu déroutant. L'un d'entre eux est le positionnement de divers éléments DIV dans la disposition souhaitée. Beaucoup de nouveaux développeurs ont recours à l'élément TABLE quand ils ne reçoivent pas la main sur DIV. Bien que, le positionnement DIV est pas aussi simple, mais une fois que vous savez comment faire positionner l'élément -div est beaucoup plus souple que l'élément TABLE. Utilisation de DIV vous pouvez créer une mise en page exactement comme vous le voulez, sans se restreint par les frontières dures ou TABLE, TR et des éléments de TD. Et d' ailleurs, les moteurs de recherche donnent aussi plus de respect pour documenter modèle d'objet qui utilise élément DIV sur l'élément rigide TABLEAU.

Grille mise en page peut être facilement fait avec CSS ainsi.

Grille mise en page peut être facilement fait avec CSS ainsi.

Eh bien, revenons à la question initiale de la façon de positionner trois (ou plus de trois) DIVs côte à côte. L'astuce est très simple. Tout ce que vous devez faire est de définir la largeur de chaque div et flotter vers la gauche. Par défaut, un élément DIV prend 100% de la largeur disponible dans la fenêtre du navigateur. Voilà pourquoi il ne permet pas de tout autre élément à venir de manière à son côté droit. Donc, vous définissez explicitement la largeur de la div puis flottez vers la gauche afin que la prochaine div peut venir sur le côté droit de la première div.

Voici un exemple:

<div style="width: 100px; float:left; height:100px; background:magenta; margin:20px">DIV 1</div>
<div style="width: 100px; float:left; height:100px; background:green; margin:20px">DIV 2</div>
<div style="width: 100px; float:left; height:100px; background:cyan; margin:20px">DIV 3</div>

Et voici le résultat du code ci-dessus:

DEMO:

DIV 1
DIV 2
DIV 3

Le point le plus important dans l' exemple ci - dessus est "width: 100px; float: left; "-C'est ce qui provoque DIVs aller côte à côte.

Il y a quelque temps, nous avions publié environ une autre méthode consistant à placer deux éléments div côte à côte - puis de les positionner à l'aide de l' attribut de marge. Utilisation de marges, vous pouvez placer DIVs partout sur la page Web (et même en dehors de la page!). Prendre plaisir!

Ads

Partager