Maison > Article > interface Web > Implémentation de la disposition des colonnes de gauche, du milieu et de droite dans la page CSS

Implémentation de la disposition des colonnes de gauche, du milieu et de droite dans la page CSS

不言original: 2018-06-21 16:36:233144parcourir

La mise en page avec les colonnes de gauche, du milieu et de droite est relativement courante dans les mises en page Web actuelles. Ci-dessous, je vais partager avec vous deux bonnes méthodes pour obtenir la mise en page des colonnes de gauche, du milieu et de droite. Le code est très détaillé. Ne le manquez pas si vous en avez besoin.

Copiez et collez le code suivant à utiliser :
Exemple 1 :

<!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"> 
<head> 
<meta charset="gb2312" /> 
<style type="text/css"> 
.page_center { 
width:100%; 
} 
#nav { 
background-color:red; 
height:20px; 
} 
#left { 
width:120px; 
background-color:green; 
position:absolute; 
} 
#middle { 
background-color:yellow; 
} 
#right { 
width:120px; 
background-color:green; 
position:absolute; 
top:0; 
right:0; 
} 
#foot { 
background-color:pink; 
} 
#main { 
position:relative; 
} 
</style> 
</head> 
<body> 
<p id="nav" class="page_center">上边</p> 
<p id="main" class="page_center"> 
<p id="left">左边</p> 
<p id="middle"> 中间部分</p> 
<p id="right">右边</p> 
</p> 
<p id="foot" class="page_center">底边</p> 
</body> 
</html>

Exemple 2 :

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<style type="text/css"> 
#left{ 
float:left; width:240px; height:500px; background:#0C9; 
} 
#right{ 
float:right;width:240px;height:500px; background:#933; 
} 
#center{ 
height:500px;background:#06C; 
} 
</style> 
<body> 
<p id="left" >左边</p> 
<p id="right" >右边</p> 
<p id="center" style="">中间</p> 
</body> 
</html>

<span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><strong></strong></span>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la mise en œuvre d'une mise en page multi-lignes et multi-colonnes avec CSS

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!

php css

Déclaration：

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

Article précédent：Comment résoudre le problème que Firefox utilise offsetHeight pour obtenir la hauteur d'un div, qui est 0Article suivant：Comment résoudre le problème que Firefox utilise offsetHeight pour obtenir la hauteur d'un div, qui est 0

Articles Liés

Voir plus