Que faire si les DIV se chevauchent en HTML-tutoriel HTML-php.cn

Que faire si les DIV se chevauchent en HTML

php中世界最好的语言

Libérer： 2017-11-23 18:12:09

original

21334 Les gens l'ont consulté

Nous rencontrons souvent un problème lors de la création de pages Web, c'est-à-dire que DIV couvre DIV, il y a donc un problème que les boîtes DIV se chevauchent et que le contenu n'apparaît pas. Nous allons donc vous présenter aujourd'hui les raisons et la solution.

Peut-être avez-vous rencontré une mise en page avec une structure descendante. Le contenu de la DIV inférieure chevauche le contenu de la DIV supérieure. Il est également possible que le contenu du dessous couvre la mise en page de la DIV supérieure. DIV, entraînant un chevauchement de DIV et DIV. Vous pouvez également rencontrer une couverture superposée de deux boîtes DIV adjacentes. Quel est le problème et comment le résoudre ?

Ensuite, nous utiliserons un cas pour démontrer le phénomène de chevauchement de ces deux superpositions DIV compatibles, et expliquerons les raisons et les solutions.

Structure supérieure et inférieure Couverture de la boîte DIV Tout d'abord, utilisez l'exemple de code HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>DIV与DIV覆盖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa,.boxb{ margin:0 auto; width:400px;} 
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
.boxb{ border:1px solid #000; height:40px; background:#999} 
</style> 
</head> 
<body> 
<div class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

Copier après la connexion

Vous pouvez copier le code et découvrir par vous-même le phénomène de couverture DIV.

Exemple de description de code :

Définissez deux grandes boîtes div avec les noms CSS de ".boxa" et ".boxb", définissez la largeur sur la même 400 px et définissez-en une pour ".boxb " Une bordure noire d'une hauteur de 40px et un fond noir ; puis ajoutez deux petites cases dans boxa, une à gauche et une à droite. Les noms CSS sont ".boxa-l" et ".boxa-r", et la couleur rouge est définie en même temps. La bordure et la hauteur CSS sont de 80 px, et la largeur est de 280 px et 100 px respectivement.

Analyse du problème

Généralement, il est nécessaire de disposer ".boxa" et ".boxb" dans une structure descendante. À partir de l'image ci-dessus, nous constatons que l'effet observé dans le. Le navigateur est que le contenu des deux boîtes est L'effet de structure haut-bas est obtenu, mais le DIV ".boxb" passe sous ".boxa", mais le contenu n'est pas écrasé, seul le DIV est écrasé.

Cette raison est que l'enfant dans la première grande boîte utilise l'attribut float float pour flotter, donc ".boxa" n'est pas ouvert, et le même niveau La boîte ".boxb" est étroitement lié à ".boxa", mais ".boxa" n'a pas de hauteur. Les enfants flottants de ".boxa" ne sont pas au même niveau que ".boxb". La boîte ".boxb" considère toujours ".boxa". Il n'y a pas de hauteur, donc la boîte DIV ".boxb" passe sous la boîte DIV de sous-niveau ".boxa", formant un phénomène de chevauchement.

Solution au problème

Soit effacez le flottant, soit définissez la hauteur ".boxa". Généralement, vous ne pouvez pas définir une hauteur fixe si le contenu du texte est incertain. , donc généralement La hauteur de ".boxa" ne peut pas être définie (vous pouvez bien sûr déterminer la hauteur du contenu. Dans ce cas, ".boxa" peut définir une hauteur pour résoudre le problème de couverture.).

Ici, nous utilisons la méthode CSS clear float pour résoudre le problème du chevauchement des DIV dans les structures supérieure et inférieure. Il existe deux façons d'effacer float. Les méthodes sont les suivantes.

css clear efface les flottants

Ajoutez un style clair avant de fermer la boîte ".boxa"

<!DOCTYPE html> <html> <head> <title>DIV与DIV覆盖</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .boxa,.boxb{ margin:0 auto; width:400px;} .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} .boxb{ border:1px solid #000; height:40px; background:#999} .clear{ clear:both} </style> </head> <body> <div class="boxa"> <div class="boxa-l">内容左</div> <div class="boxa-r">内容右</div> <div class="clear"></div> </div> <div class="boxb">boxb盒子里的内容</div> </body> </html>

Cette méthode est de plus en plus simple que la méthode précédente, il suffit d'ajouter <🎜 à ".boxa" (boîte parent avec enfants flottants) >overflow:hidden)

<!DOCTYPE html> <html> <head> <title>DIV与DIV覆盖</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .boxa{ overflow:hidden} .boxa,.boxb{ margin:0 auto; width:400px;} .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} .boxb{ border:1px solid #000; height:40px; background:#999} </style> </head> <body> <div class="boxa"> <div class="boxa-l">内容左</div> <div class="boxa-r">内容右</div> </div> <div class="boxb">boxb盒子里的内容</div> </body> </html>

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!