CSS左中右布局，规范案例
生活随笔
收集整理的這篇文章主要介紹了
CSS左中右布局，规范案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>說明
1、在#container中設置“position:relative;”，其作用是使得后面的絕對定位的基準為#container而不是以瀏覽器為其準。
2、左側列#left_side和右側#right_side列采用絕對定位，并且固定這兩個div的寬度，而中間列#content由于需要根據瀏覽器自動調整，因此不設置類似屬性。
但由于另外兩個塊的position屬性設置為absolute，此時必須將它的margin-left和margin-right屬性都設置為190px。
?
轉載于:https://www.cnblogs.com/jiqing9006/p/4983980.html
總結
以上是生活随笔為你收集整理的CSS左中右布局，规范案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： (王道408考研操作系统)第二章进程管理
- 下一篇： 用 CSS 做轮播图