Maison > Article > interface Web > Comment faire apparaître des cases côte à côte en CSS
Comment faire apparaître des cases côte à côte en CSS
- 醉折花枝作酒筹original
- 2021-04-22 18:04:5319837parcourir
Comment afficher les boîtes côte à côte : 1. Utilisez l'attribut float pour définir l'affichage côte à côte. Définissez simplement "float:right|left;" sur div; définissez l'affichage côte à côte. Définissez simplement le div pour qu'il s'affiche côte à côte.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Commençons par configurer trois objets div box sans définir de styles CSS pour voir l'effet. Le code est le suivant :
<body>
<div>第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
</body>
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 de l'occupation de p. une ligne exclusive consiste à définir un flotteur et l'autre à définir le style d'affichage. Ensuite, je présenterai comment résoudre le problème des objets p box disposés côte à côte horizontalement et affichés dans la même rangée à travers des articles + images + cas.
1. Utilisez CSS float pour l'affichage 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 le div tant que le total. la largeur de votre boîte p côte à côte est inférieure ou égale à la largeur de la boîte la plus à l'extérieur , plusieurs objets p peuvent être affichés côte à côte.
Remarque : ①Définissez l'attribut float ②La largeur totale du côte à côte est plus petite que la largeur de la couche externe.
<style>
div{
border: 1px solid #000;
float:left;
}
</style>
Ici, nous définissons un float pour le div Bien sûr, en utilisation réelle, si nous voulons afficher les objets div dans une rangée et ajouter un css. classe, nous les afficherons en parallèle. Évitez d'ajouter d'autres paramètres inutiles au style flottant.
2. Utilisez l'affichage CSS pour afficher côte à côte
Nous pouvons résoudre le problème de l'affichage des objets de boîte div côte à côte en ajoutant display:inline.
Définissez le style div{ display:inline} sur la balise div et prenez une capture d'écran après avoir résolu le problème :
<style>
div{
border: 1px solid #000;
display: inline;
}
</style>
Apprentissage recommandé : tutoriel vidéo CSS
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!