CSS左中右布局，规范案例
生活随笔
收集整理的這篇文章主要介紹了
CSS左中右布局，规范案例
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
html部分
<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>css部分
<style type="text/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; } </style>說(shuō)明
1、在#container中設(shè)置“position:relative;”，其作用是使得后面的絕對(duì)定位的基準(zhǔn)為#container而不是以瀏覽器為其準(zhǔn)。
2、左側(cè)列#left_side和右側(cè)#right_side列采用絕對(duì)定位，并且固定這兩個(gè)div的寬度，而中間列#content由于需要根據(jù)瀏覽器自動(dòng)調(diào)整，因此不設(shè)置類(lèi)似屬性。
但由于另外兩個(gè)塊的position屬性設(shè)置為absolute，此時(shí)必須將它的margin-left和margin-right屬性都設(shè)置為190px。
?
轉(zhuǎn)載于:https://www.cnblogs.com/jiqing9006/p/4983980.html
總結(jié)
以上是生活随笔為你收集整理的CSS左中右布局，规范案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： (王道408考研操作系统)第二章进程管理
- 下一篇： 进击的UI------------网络判