Maison > Article > interface Web > Exemple de partage de code de plusieurs boîtes div affichées côte à côte en CSS

Exemple de partage de code de plusieurs boîtes div affichées côte à côte en CSS

黄舟original: 2017-07-22 10:32:2212339parcourir

1. Comment implémenter la disposition DIV avec deux colonnes, une ligne et deux colonnes en div, solution du tutoriel de disposition DIV avec deux colonnes en div, une ligne et deux colonnes côte à côte
Pour réaliser deux boîtes DIV côte à côte côte à côte et n'afficher que deux colonnes de disposition DIV sur une seule ligne, utilisez width + Float peut réaliser une disposition DIV affichant deux colonnes sur une ligne.
Dans le premier cas, les flotteurs sont les mêmes
Rendez les valeurs flottantes des deux boîtes div identiques, par exemple, définissez float:left ou float:right et définissez la largeur de manière appropriée. Ici, nous utilisons un cas pour implémenter une disposition DIV à une ligne et deux colonnes.
1), exemple complet de code DIV+CSS :

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-a{ float:left;width:49%;border:1px solid #F00} 
.div-b{ float:left;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-a">第一个DIV盒子</div> 
<div class="div-b">第二个DIV盒子</div> 
</body> 
</html>

2), vous devez faire attention à la largeur, si vous souhaitez disposer le DIV sur une ligne et deux colonnes , évitez que le troisième DIV soit côte à côte, ici Il faut paramétrer et calculer la largeur (ici, fixer le pourcentage de largeur à 49%). La somme des largeurs des trois cases DIV est supérieure à la largeur du DIV. parent, et la somme des largeurs des deux DIV est inférieure à la largeur du parent, de sorte que seuls 2 DIV peuvent être côte à côte.
3) Dans le deuxième cas, les valeurs float sont différentes
L'une est définie sur float:left; l'autre est définie sur float:right.
Code source HTML complet :

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-c{ float:left;width:49%;border:1px solid #F00} 
.div-d{ float:right;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-c">第三个DIV盒子</div> 
<div class="div-d">第四个DIV盒子</div> 
</body> 
</html>

2. Disposition horizontale des DIVs_CSS Comment faire apparaître plusieurs boîtes div côte à côte, comment faire apparaître plusieurs boîtes div côte à côte et les divs disposés horizontalement ?
Nous avons d’abord configuré trois objets div box sans définir de styles CSS pour voir l’effet. Le code est le suivant :
Capture d'écran des divs qui ne sont pas affichés dans la même ligne
Trois boîtes div sont affichées dans une ligne exclusive
L'attribut de style par défaut de la boîte div elle-même est d'occuper une ligne exclusive . Il existe généralement deux façons de résoudre le problème des divs occupant une ligne exclusive. L'une consiste à définir Flottant, l'autre consiste à définir le style d'affichage. Ensuite, je présenterai comment résoudre le problème de la disposition horizontale des objets de boîte div côte à côte et de leur affichage côte à côte à travers des articles + des images + des cas.
1. Utilisez CSS float pour afficher côte à côte
Nous pouvons résoudre le problème de l'affichage côte à côte en définissant un attribut float sur les divs tant que la largeur totale de votre div côte à côte. boîtes est inférieure ou égale à la largeur de la boîte la plus extérieure, plusieurs divs peuvent être réalisés. Les objets sont affichés côte à côte.
Ajouter un flotteur pour réaliser un affichage côte à côte des boîtes div
Ajouter un flotteur pour réaliser un affichage côte à côte de plusieurs div
Ici, nous définissons un flotteur pour le div Bien sûr, lors de l'utilisation réelle. cela, nous devons ajouter la classe CSS pour afficher les objets div dans une ligne, nous définirons le sélecteur CSS flottant pour qu'il soit affiché dans la même ligne. Évitez d’ajouter d’autres paramètres inutiles au style flottant.
2. Utilisez CSS Display pour afficher côte à côte
Nous pouvons résoudre le problème en ajoutant display:inline pour afficher les objets de la boîte div côte à côte. Afin de distinguer les autres objets de boîte div qui n'ont pas besoin d'être affichés dans une disposition horizontale, nous utilisons une classe CSS en gras unifiée pour les boîtes div adjacentes qui doivent être affichées dans la même ligne, et le CSS est nommé ".div- en ligne".
Le code CSS est le suivant :

.div-inline{ display:inline}

Extrait de code HTML :

<div class="div-inline">第一个div盒子</div> 
<div class="div-inline">第二个盒子</div> 
<div class="div-inline">第三个盒子</div>

3. Résumé : Que ce soit float ou display, atteindre le côté -Affichage côte à côte, si vous souhaitez les afficher côte à côte, la largeur totale doit d'abord être inférieure ou égale à la largeur du niveau supérieur de l'objet, afin que vous puissiez les afficher côte à côte pour obtenir une disposition horizontale.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'attribut transparent ccs et des exemples de méthodes d'héritage transparent en arrière-planArticle suivant：Explication détaillée de l'attribut transparent ccs et des exemples de méthodes d'héritage transparent en arrière-plan

Articles Liés

Voir plus