Maison > interface Web > tutoriel HTML > le corps du texte

Comment résoudre le problème selon lequel le div parent ne peut pas être ouvert automatiquement une fois que le div enfant est défini sur flottant.

不言
Libérer: 2018-07-25 09:41:47
original
2512 Les gens l'ont consulté

Le contenu partagé avec vous dans cet article concerne la configuration de float sur le div enfant, ce qui empêchera le div parent de s'ouvrir automatiquement. Le contenu est très détaillé. Ensuite, prenons un. regardez le contenu spécifique. J'espère que cela pourra aider tout le monde.

Raison : Le p interne perd les styles clear:both et display:block après float:left, donc le p externe ne sera pas ouvert.

Voici plusieurs solutions (en supposant que la classe du parent p est "conteneur") :

  • Méthode 1. Utiliser des pseudo-classes

container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
}
Copier après la connexion
  • Méthode 2. Le principe de non-ouverture est que le débordement n'est pas visible, il suffit donc d'ajouter overflow:auto au parent IE doit utiliser _height:1%; ;

container{
    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/
     _height:1%;/*对IE的hack*/
}
Copier après la connexion
  • Méthode 3. Vous pouvez ajouter un sous-p à la fin pour effacer le flottant : <p class="clear"></p>
    Définissez le style. clear{clear:both; font-size:0; height:1%;}

  • Méthode 4. Vous pouvez définir la hauteur du parent p (c'est-à-dire l'agrandir manuellement, ce qui est inflexible) ; 🎜>Méthode 5. Réglez directement la hauteur du p parent

    comme ceci Il peut également être ouvert automatiquement
  • display: inline-block;Méthode 6. Réglez directement le sous-p

    Il peut également être ouvert automatiquement, mais le problème de composition doit être étudié et étudié
  • display: inline-block;Méthode 7. J'ai également trouvé une méthode sur Internet pour ajouter des attributs au parent p :

  • display:table;Méthode 8. Si l'enfant p flotte, je ne peux pas vous piéger ? OK, je laisse le parent p flotter également : Le paramètre parent p

    peut aussi être
  • float: left;Recommandations associées :

tinymce et prism réalisent la mise en évidence du code et la configuration chinoise Méthode et processus

Introduction à la façon de dynamiquement générer des éléments html et ajouter des attributs aux éléments (avec code)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Derniers numéros
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!