Comment faire apparaître des cases côte à côte en CSS-tutoriel CSS-php.cn

Comment faire apparaître des cases côte à côte en CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:39

original

19975 Les gens l'ont consulté

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.

Comment faire apparaître des cases côte à côte en CSS

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>

Copier après la connexion

Comment faire apparaître des cases côte à côte en CSS

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>

Copier après la connexion

Comment faire apparaître des cases côte à côte en CSS

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>

Copier après la connexion

Comment faire apparaître des cases côte à côte en CSS

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!