Heim > Artikel > Web-Frontend > Implementierung des linken, mittleren und rechten Spaltenlayouts in der CSS-Seite

Implementierung des linken, mittleren und rechten Spaltenlayouts in der CSS-Seite

不言Original: 2018-06-21 16:36:233142Durchsuche

Das Seitenlayout mit linken, mittleren und rechten Spalten ist in aktuellen Webseitenlayouts relativ üblich. Im Folgenden werde ich Ihnen zwei gute Methoden vorstellen, um das Layout für die linke, mittlere und rechte Spalte zu erreichen. Verpassen Sie es nicht, wenn Sie es brauchen.

Kopieren Sie den folgenden Code und fügen Sie ihn ein:
Beispiel 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>

Beispiel 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>

Oben Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Informationen zur Implementierung eines mehrzeiligen und mehrspaltigen Layouts mit CSS

Das obige ist der detaillierte Inhalt vonImplementierung des linken, mittleren und rechten Spaltenlayouts in der CSS-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So lösen Sie das Problem, dass Firefox offsetHeight verwendet, um die Höhe eines Divs zu ermitteln, die 0 istNächster Artikel：So lösen Sie das Problem, dass Firefox offsetHeight verwendet, um die Höhe eines Divs zu ermitteln, die 0 ist

In Verbindung stehende Artikel

Mehr sehen