Comment faire Box1 Remplissez l'espace restant après l'exclusion de Box2? ou: Comment Box1 remplit-il l'espace restant et exclut la zone occupée par Box2?

Comment faire en sorte que Box1 remplisse l'espace restant après exclusion de Box2?

Cet article explorera comment réaliser un effet de mise en page: l'élément Box1 occupe l'espace restant, et après exclure la zone occupée par l'élément Box2, il remplira toujours le conteneur parent. Le code initial donné dans la question utilise le bloc en ligne pour provoquer la disposition verticalement verticale de Box1 et Box2, plutôt que la disposition horizontale attendue et Box1 prend l'espace restant. Afin d'obtenir les résultats attendus, nous devons ajuster la méthode de mise en page.

Il y a deux solutions fournies dans l'article:

Solution 1: Utilisez la fonction calc ()

Ce schéma conserve l'affichage: paramètre de blocage en ligne dans le code d'origine et calcule la largeur de Box1 via la fonction CSS calc (). La fonction calc () nous permet d'effectuer des opérations mathématiques simples, où nous utilisons la largeur du conteneur parent pour soustraire la largeur de Box2 (200px) pour calculer la largeur de Box1. Le code est le suivant:

 # box1 {
  Largeur: calc (100% - 200px);
}

Il convient de noter que cette méthode nécessite de connaître la largeur de Box2 à l'avance. Si la largeur de Box2 change dynamiquement, la valeur dans calc () doit être ajustée dynamiquement en fonction de la situation réelle.

Solution 2: Utilisez la disposition Flex

Cette solution utilise la disposition Flex pour obtenir un contrôle de disposition plus flexible. Allouer l'espace restant pour Box1 en définissant le conteneur parent #Content dans le conteneur Flex et en utilisant Flex: 1. En attendant, Flex-Shrink: 0 empêche la compression de Box2. Le code est le suivant:

 #contenu {
  Affichage: flex;
  Direction flexible: ligne;
}

# box1 {
  Flex: 1;
}

# box2 {
  flex-shrink: 0;
  Largeur: 200px;
}

Les dispositions flexibles offrent des capacités de disposition plus fortes, permettant une manipulation plus pratique des besoins des éléments de différentes tailles et des dispositions réactives. Comparé à la solution 1 et à la solution 2, il est plus flexible et plus facile à entretenir.

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!