【效果】
【HTML】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %> <!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 runat="server"> <title>左中右版式</title> </head> <body> <form id="form1" runat="server"> <div id="wrap"> <div id="header">header</div> <div id="container"> <div id="left_side">left_side</div> <div id="content">content</div> <div id="right_side">right-side</div> </div> <div id="footer">footer</div> </div> </form> </body> </html>
【CSS】
#wrap{ width:700px; margin:0 auto; } #header{ margin:20px; height:80px; border:solid 1px #0000FF; } #container{ position:relative; margin:20px; height:400px; } #left_side{ position:absolute; top:0px; left:0px; border:solid 1px #0000FF; width:170px; height:100%; } #content{ margin:0px 190px 0px 190px; border:solid 1px #0000FF; height:100%; } #right_side{ position:absolute; top:0px; right:0px; border:solid 1px #0000FF; width:170px; height:100%; } #footer{ margin:20px; height:80px; border:solid 1px #0000FF; }
【說明】
典型的DIV+CSS布局——固定寬度且居中的版式中,運用的是浮動屬性;這個實例,則運用了絕對定位屬性。
1、在#container中設置“position:relative;”,其作用是使得后面的絕對定位的基准為#container而不是以瀏覽器為其准。
2、左側列#left_side和右側#right_side列采用絕對定位,並且固定這兩個div的寬度,而中間列#content由於需要根據瀏覽器自動調整,因此不設置類似屬性。
但由於另外兩個塊的position屬性設置為absolute,此時必須將它的margin-left和margin-right屬性都設置為190px。
3、左中右布局,也可以運用浮動屬性,具體可參考典型的DIV+CSS布局——固定寬度且居中的版式。
【參考文獻】
李卓群.網頁設計實例教程[M].北京:清華大學出版社,2010:194-197.
溫謙.CSS設計徹底研究[M].北京:人民郵電出版社,2008.(附:電子書下載地址)
SHEA D.CSS禪意花園[M],北京:人民郵電出版社2007.(附:電子書下載地址)