CSS tire à droite

Il y a eu de nombreuses situations lorsque vous souhaitez extraire vos données ou un élément HTML dans une direction spécifique de la page HTML. Dans cette situation, vous pouvez vous retrouver mal à l'aise pour trouver la propriété spécifique pour le faire. Mais, la propriété Float CSS peut vous aider à atteindre votre objectif. Cette propriété prend les attributs à gauche, à droite et aucun pour faire flotter votre élément vers une direction spécifique concernant la page HTML et d'autres éléments connexes du script HTML. Nous avons donc décidé de couvrir quelques exemples en utilisant la propriété flottante pour tirer les éléments à droite et à gauche.

Exemple 01:

Dans notre premier exemple, nous utiliserons la propriété flottante pour tirer les différents éléments vers la droite, à gauche et nulle part. De plus, nous comparerons ces propriétés les unes aux autres pour une meilleure compréhension. Nous commençons notre premier exemple avec le format de document HTML standard utilisé pour la création de toutes les pages Web basées sur HTML. La balise Head contient le titre de la page HTML à créer à l'aide d'une balise interne «Title». Après cela, nous avons une balise de style et la balise du corps principal. Avant de regarder le style CSS d'une page HTML, nous devons jeter un œil au corps qui va être stylé. Le corps de cette page HTML contient le titre de taille 1 simple et la balise «div» principale pour créer une section dans la page HTML. Cette balise «div» est spécifiée avec la classe «A» pour la différenciation pendant le style. Dans cette section, nous avons 3 autres éléments «div» qui sont utilisés ici.

Les trois sections div sont spécifiées avec trois classes différentes - flottante-gauche, flottante droite et flottante. Après avoir fermé ces trois sections «div», nous fermons également la section «div» principale. La fermeture de la section Div principale est suivie par la balise «corps» de ce HTML. Le corps et sa partie d'éléments sont maintenant terminés. Pour faire tirer des sections à droite ou à gauche, nous devons les styliser en conséquence. Ainsi, dans la balise de style du code HTML, nous utilisons la classe «A» pour que la première section «div» le positionne par rapport à la page HTML via la propriété «position».

De plus, cette section principale est de 400 pixels de largeur et de hauteur avec une bordure solide de 3 pixels en couleur marron. Après cela, nous utilisons les classes flottantes, flottantes, float-droit et flottantes pour les sections intérieures «div» pour les styliser en conséquence. La propriété Float est utilisée pour la première section Inner Div pour le tirer vers le droit exact de la page HTML. De plus, cette section contient une largeur de 100 pixels, une hauteur de 120 pixels et un bord en pointillé de 3px en couleur bleu massif. Le deuxième «div» intérieur est positionné sur relatif et tiré vers la gauche de la page HTML à l'aide de la propriété Float. Il a une largeur de 200px, 120px de hauteur, avec la bordure verte solide 3px. La dernière section intérieure contient une position absolue sans propriété de traction spécifiée. De plus, il a une bordure brun massive 3px, une largeur de 100px et une hauteur de 100px. Ce code est prêt à être utilisé sur le navigateur Chrome via le code Visual Studio pour voir le style.

En l'exécutant dans le navigateur Chrome, nous obtenons la sortie suivante. La section principale Div est affichée avec une bordure rouge solide et sa position est relative à la page HTML. Tandis que la section div de couleur bleue de la bordure pointillée est tirée vers la droite avec l'utilisation de la propriété «flottante» dans le CSS de ce code comme indiqué dans l'image. La section DIV de couleur verte est tirée vers la gauche à l'aide de la propriété «Float» et elle est relative à la page HTML. La position de la section «div» brune est spécifiée comme relative et est affichée dans l'image.

Exemple 02:

Commençons par un autre exemple d'utilisation de la propriété flottante de CSS pour tirer les éléments du HTML à droite ou à gauche. Ce code commence par la même balise HTML suivant la balise «Head» qui contient le titre de cette page HTML, I.e. "CSS tire à droite". Pour ajouter un titre pour cette page, nous utilisons la balise de titre. Nous devons examiner d'abord la section corporelle de notre script HTML. Nous ajoutons une rubrique au corps de la page HTML à l'aide de la balise d'en-tête «H1», je.e. En-tête de grande taille.

Après cela, nous essayons une balise «section» dans ce code HTML. Cette balise de section est utilisée pour créer une section dans le corps de la page HTML. Dans cette section, nous utilisons trois nouveaux éléments «div» et un élément de paragraphe. Les deux premiers balises Div utilisent la même classe «gauche-pullle» tandis que la troisième balise Div utilise une autre classe «droite» dans sa balise d'ouverture. Les deux premières balises div contiennent des textes simples en leur sein tandis que la troisième balise div contient une balise d'image «IMG» pour ajouter l'image dans cette section div. La source de cette image est notre système local et il est au format «JPG». Le paragraphe contient également une simple ligne de texte.

Après la fin des 3 étiquettes div et de la balise de paragraphe, notre étiquette de section s'est terminée ici avec sa fermeture. Le corps de cette page HTML est terminé maintenant. Fermez la balise «corps». Dans la balise «style» de ce code HTML pour le style, nous spécifions l'élément «Section» pour styliser ses éléments intérieurs combinés à la fois. Cette taille de section est définie par le format «Border-Box» et il contient la bordure en pointillé de 5 pixels autour. La largeur de cette section est de 50% pendant qu'elle est tirée à gauche via la propriété «flottante». Les éléments «div» sont stylés avec une marge de 5px, une largeur de 200px et une hauteur de 150px pour tous. Les éléments div contenant la classe «gauche-till» sont affichés en position de gauche avec le fond rose du thé.

Tandis que les éléments div avec la classe «à droite» sont tirés vers la droite avec l'utilisation de la propriété «flottante» et l'arrière-plan est réglé sur la couleur du ciel. Notre code est terminé et est prêt à l'emploi dans le code Visual Studio via le menu «Exécuter» suivant l'option «Débogage de démarrage».

La sortie de ce code montre le titre simple et une nouvelle section en pointillés générée dans la page HTML. Cette section contient trois sections de div différentes. Les deux premières sections div sont tirées à gauche avec la couleur du fond de thé rose. Tandis que la troisième section Div contient une image tirée vers la droite de cette page HTML.

Conclusion

Nous avons discuté de la nécessité et de l'utilisation de tirer les éléments dans la page HTML dans notre paragraphe d'introduction. Cet article montre une démonstration très claire de tirer les éléments CSS vers la gauche, à droite ou aucune via la propriété «flottante» CSS. Il est utilisé dans tous les exemples pour tirer ces éléments dans une direction spécifique avec l'utilisation de classes dans les sections div. Tous les exemples couverts dans cet article sont assez simples et faciles à comprendre pour tout utilisateur CSS débutant et expert.