J'ai soudainement pensé à cette méthode lorsque j'écrivais une disposition à trois colonnes dans CSS pendant quelques jours. Je me sentais un peu fou de cette idée. S'il y a quelque chose qui ne va pas, veuillez me donner quelques conseils.
Lorsque j'ai besoin d'écrire une mise en page à trois colonnes, je choisirai généralement d'utiliser la méthode de mise en page div suivante:
Figure 1 Disposition div
L'utilisation de ces méthodes de nidification peut sans aucun doute réduire beaucoup la probabilité d'erreurs de code, mais en même temps, une telle disposition est un peu compliquée et est légèrement gênante pour la maintenance ultérieure. Lorsque nous disposons de la navigation, nous utilisons souvent une méthode, qui consiste à utiliser la liste 〈Ul〉 pour la mise en page, et la navigation peut être décrite comme une disposition multi-colonnes. Étant donné que c'est le cas, nous pouvons également utiliser 〈Ul〉 pour disposer de plusieurs colonnes de la page.
Figure 2 Dispose de div
Il s'agit d'une disposition à largeur fixe, ce qui signifie que la liquidité n'est pas forte. La disposition des liquidités n'a pas encore été testée. Je vais l'essayer quand j'aurai le temps. Ce qui suit est le code de cette mise en page:
<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = utf-8 ″ />
<Title> Utilisez UL pour la mise en page multi-colonnes </TITAL>
<style type = text / css>
* {margin: 0; rembourrage: 0;}
corps {
Largeur: 100%;
hauteur: 100%;
Contexte: #DDEDFB;
}
#MainContent {
Largeur: 600px;
marge: 10px automatique;
}
# en-tête, # pieds de page {
Contexte: # 8AC7FA;
hauteur: 80px;
Clear: les deux;
}
#footer {
Clear: les deux;
Tableau de rembourrage: 10px;
}
#contenu {
hauteur: 300px;
marge: 10px automatique;
}
#Content ul {
Style de liste: aucun;
hauteur: 100%;
}
#Content ul li {
Largeur: 150px;
hauteur: 100%;
Contexte: # 8AC7FA;
flottant: à gauche;
}
#Content ul li # li2 {
Largeur: 280px;
marge: 0 10px;
}
#Content ul li # li2 ul li {
Largeur: 270px;
hauteur: 140px;
marge: 5px;
Contexte: # 0581F0;
}
</ style>
</ head>
<body>
<div id = MainContent>
<div id = en-tête> Ceci est la tête </div>
<div id = contenu>
<ul>
<li> C'est la gauche </li>
<li id = li2 ″>
<ul>
<li> C'est la partie supérieure du milieu </li>
<li> C'est la partie inférieure du milieu </li>
</ul>
</li>
<li> C'est le droit </li>
</ul>
</div>
<div id = pied> C'est le bas </div>
</div>
</docy>
</html>
Ce code peut être affiché normalement sous IE7 et FF3. D'autres navigateurs ne l'ont pas testé. Si vous avez une meilleure méthode, vous pourriez aussi bien le proposer.