interface Web
tutoriel CSS
Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)
Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)
Revenons ensuite au problème du chevauchement des marges extérieures de deux divs horizontaux
<html>
<head>
<style type="text/css">
body{margin:0;padding:0;}
#a{width:500px;height:500px;border:solid;}
.div{width:100px;height:100px;border:soild;
margin-right:20px;background:green;float:left;}
#b{width:100px;height:100px;border:soild;margin-left:20px;background:green;float:left;}
</style>
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>
ie6 et Firefox sont identiques
Cela montre que les marges extérieures horizontales ne se chevaucheront pas
Pourquoi le premier div n'est-il pas défini pour flotter, mais le deuxième div est défini sur
, il ne sera donc pas disposé horizontalement
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
}
#b{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
float:left;
}
</style>
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>Premier coup d'oeil à Firefox
Ici vous pouvez voir que pour les divs flottants et les divs ordinaires, les marges verticales ne se chevaucheront pas
Regardez at ie6
Le deuxième div ajoute en fait la marge gauche au premier div, qui est de 10 px, donc le problème de compatibilité du navigateur est assez gênant
Les divs flottants peuvent être positionnés en fonction des divs ordinaires
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
}
#b{
width:100px;
height:100px;
border:soild;
margin-top:25px;
background:green;
float:left;
}
</style>
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>
Les divs ordinaires peuvent-ils donc être positionnés en fonction des divs flottants ? Expérimenter
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
}
#b{
width:100px;
height:100px;
border:soild;
margin-top:25px;
background:green;
float:left;
}
#c{
width:300px;
height:300px;
border:soild;
margin-top:50px;
background:green;
}
</style>
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>
Ici, nous agrandissons délibérément la troisième div
Comme vous pouvez le voir, je ne le fais pas Je ne sais pas que le deuxième div existe, mais il est positionné en fonction du premier div ordinaire, avec une distance de 50px
Le troisième div ici ne couvre pas le deuxième div, mais est en dessous, plaçant le troisième div en dessous . Cela se voit si vous changez la couleur des deux divs
Parce que les divs ordinaires ne peuvent être qu'au sol et ne peuvent pas être dans les airs
. Je regarde le spectacle ie6. . .
Je pense qu'utiliser IE6 pour apprendre le CSS est une tragédie. . .
Alors, les divs flottants peuvent-ils être positionnés en fonction des divs flottants ?
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
}
#b{
width:100px;
height:100px;
border:soild;
background:green;
float:left;
}
#c{
width:100px;
height:100px;
border:soild;
margin-left:50px;
background:green;
float:left;
}
</style>
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>La réponse est oui
Idem pour ie6
Ce qui suit est un résumé
Les éléments flottants peuvent être positionnés en fonction d'éléments non flottants (c'est-à-dire des divs ordinaires) et d'éléments flottants
Les éléments non flottants ne peuvent être positionnés qu'en fonction d'éléments non flottants, pas d'éléments flottants
Donc à propos de l'aéroport La métaphore est à réinterpréter
L'élément flottant est un avion volant dans les airs. L'élément non flottant est un avion stationné au sol
Si l'élément non flottant occupe un. zone, l'élément flottant n'occupera pas cette zone, car Vous pouvez voir la situation au sol dans les airs, vous pouvez donc le positionner en fonction d'éléments non flottants
Si l'élément flottant occupe une zone, le non-flottant. l'élément flottant au sol ne connaîtra pas la situation dans les airs, donc vous ne le saurez pas, donc les deux se chevaucheront, un dans le ciel et un au sol
Ce qui précède est le contenu du nouveau début de la conception de mises en page Web CSS div (7), plus de contenu connexe Veuillez faire attention au site Web PHP chinois (www.php.cn) !
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
