Un nouveau départ pour la conception de mises en page de pages Web div CSS (8)-tutoriel CSS-php.cn

Un nouveau départ pour la conception de mises en page de pages Web div CSS (8)

黄舟

Libérer： 2016-12-29 14:42:49

original

1286 Les gens l'ont consulté

Continuez, lorsqu'un groupe d'éléments flottants constate qu'il n'y a pas assez d'espace à droite, il descendra automatiquement et ne quittera pas la couche la plus externe, bien qu'il ne suive pas le modèle d'écoulement au sol. , il suivra toujours le flux dans l'air, ps : ils flottent tous à la même hauteur. .

<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;
float:left;
} 
#b{
width:100px;
height:100px;
border:soild;
background:green;
float:left;
margin:5px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</body>
</html>

Copier après la connexion

Un nouveau départ pour la conception de mises en page de pages Web div CSS (8)

Cela montre Firefox et ie6 de la même manière

Que se passe-t-il lorsque la hauteur du premier div flottant est plus élevée que les autres 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;
float:left;
} 
#b{
width:100px;
height:110px;
border:soild;
background:green;
float:left;
margin:5px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</body>
</html>

Copier après la connexion

Un nouveau départ pour la conception de mises en page de pages Web div CSS (8)

Vous constaterez que le dernier est coincé là. Il ne passera pas. Si vous le pressez, il plantera, n'est-ce pas ? un peu poli, mais il n'ajustera pas automatiquement la marge supérieure à gauche, car ce n'est pas encore si intelligent et doit être ajusté manuellement. S'il peut fonctionner automatiquement, ce sera un bunker, n'est-ce pas ? .

Regardons un exemple ci-dessous

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
} #b{
width:130px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
#c{
width:350px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

Copier après la connexion

Un nouveau départ pour la conception de mises en page de pages Web div CSS (8)

C'est la structure d'une page web générale, la tête n'est pas faite, voici le milieu , et à gauche est la liste, afficher le contenu à droite
Maintenant, faites la queue
Je veux obtenir cet effet

Un nouveau départ pour la conception de mises en page de pages Web div CSS (8)

Le code est le suivant

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
} #b{
width:130px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
#c{
width:350px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
#d{
width:490px;
height:100px;
border:soild;
background:red;
float:left;
margin:5px;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>
</html>

Copier après la connexion

Le code est le suivant

#d{
width:490px;
height:100px;
border:soild;
background:red;
margin:5px;
}

Copier après la connexion

Mais beaucoup de gens l'oublieront. Ajoutez float:left;

au calque inférieur et c'est tout Un nouveau départ pour la conception de mises en page de pages Web div CSS (8)

Le résultat sera comme ça

Rappelez-vous ce que j'ai dit avant, le div au sol ne le fera pas. Connaissant l'existence du sky div, on ne sait pas que le div flottant a occupé la zone
En plus d'ajouter float: left;
vers la couche inférieure, il existe un autre moyen, qui est clair

clear Cela signifie effacer le div flottant, ce que je n'ai pas compris au début, et probablement la plupart des gens Je ne comprends pas non plus.
Effacer ici ne signifie pas supprimer le div flottant, ni changer sa position
Cela doit être compris de cette façon
Ajouter clear à un div ordinaire équivaut à installer un œil. qui peut voir l'air. La division terrestre peut voir la situation de la division aérienne, afin de savoir quelle zone occupe la division aérienne, afin d'éviter d'occuper la zone de la division aérienne

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
} #b{
width:130px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
#c{
width:350px;
height:350px;
border:soild;
background:green;
float:left;
margin:5px;
} 
#d{
width:490px;
height:100px;
border:soild;
background:red;
margin:5px;
clear:both;
} 
</style> 
<head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>
</html>

Copier après la connexion

clear a Attributs left, right, Both et none. La valeur par défaut est none, ce qui signifie qu'il n'est pas défini

left signifie que vous pouvez voir l'espace supérieur gauche du div au sol, et right signifie l'espace supérieur droit <.>les deux signifient les deux côtés, utilisez généralement les deux Un nouveau départ pour la conception de mises en page de pages Web div CSS (8)

Ce qui précède est le contenu d'un nouveau début de conception de mise en page Web CSS div (8). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !