碼上快樂

相關內容    簡體    繁體

典型的DIV＋CSS布局——左中右版式

本文轉載自   查看原文   2014-12-12 15:57   13801    Javascript與CSS/ div布局/ B/S相關/ 左中右

典型的DIV＋CSS布局——固定寬度且居中的版式中，運用的是浮動屬性；這個實例，則運用了絕對定位屬性。

1、在#container中設置“position:relative;”，其作用是使得后面的絕對定位的基准為#container而不是以瀏覽器為其准。

2、左側列#left_side和右側#right_side列采用絕對定位，並且固定這兩個div的寬度，而中間列#content由於需要根據瀏覽器自動調整，因此不設置類似屬性。

但由於另外兩個塊的position屬性設置為absolute，此時必須將它的margin-left和margin-right屬性都設置為190px

 

 

 

[html]  view plaincopyprint?
 
  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml" >  
  6. <head runat="server">  
  7.     <title>左中右版式</title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div id="wrap">  
  12.         <div id="header">header</div>  
  13.         <div id="container">  
  14.             <div id="left_side">left_side</div>  
  15.             <div id="content">content</div>  
  16.             <div id="right_side">right-side</div>  
  17.         </div>  
  18.         <div id="footer">footer</div>  
  19.     </div>  
  20.     </form>  
  21. </body>  
  22. </html>

 

[css]  view plaincopyprint?
 
  1. #wrap{  
  2.     width:700px;  
  3.     margin:0 auto;  
  4. }  
  5. #header{  
  6.     margin:20px;  
  7.     height:80px;  
  8.     border:solid 1px #0000FF;  
  9. }  
  10. #container{  
  11.     position:relative;  
  12.     margin:20px;  
  13.     height:400px;  
  14. }  
  15. #left_side{  
  16.     position:absolute;  
  17.     top:0px;  
  18.     left:0px;  
  19.     border:solid 1px #0000FF;  
  20.     width:170px;  
  21.     height:100%;  
  22. }  
  23. #content{  
  24.     margin:0px 190px 0px 190px;  
  25.     border:solid 1px #0000FF;  
  26.     height:100%;  
  27. }  
  28. #right_side{  
  29.     position:absolute;  
  30.     top:0px;  
  31.     right:0px;  
  32.     border:solid 1px #0000FF;  
  33.     width:170px;  
  34.     height:100%;  
  35. }  
  36. #footer{  
  37.     margin:20px;  
  38.     height:80px;  
  39.     border:solid 1px #0000FF;  
  41. }  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 典型的DIV＋CSS布局——左中右版式 div+css與table布局 div+css布局的問題 前端之DIV+CSS布局 DIV+CSS 三欄布局 div+css的布局較table布局有什么優點？ DIV+CSS 網頁布局之：三列布局 DIV+CSS 網頁布局之：混合布局 Html 之div+css布局之css基礎 DIV+CSS 自適應布局
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM