css常見的各種布局下----三列布局
阿新 • • 發佈：2019-04-18
content back 500px 計算機 聖杯布局 osi utf-8 borde 怎麽
css 三列布局，左右固定寬度右邊自適應
1不適用定位，只使用浮動可以實現左右固定，中間寬度自適應布局
1.1.1 自適應部分一定要放第一個位子，使用浮動，並且設置寬度為100%，不設置浮動元素內容不夠稱不開整個寬度
1.1.2 左右固定部位，使用margin-left :負數，使其左右靠齊
1.1.3 中間自適應部分嵌套一個div，設置margin-left 和 margin-right 使其空出左右固定的寬度
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>雙飛翼布局</title> <style> .box{ height: 500px; background-color: bisque; position: relative; } .box .box-content { height: 100%; float: left; /* 一定要設置浮動，要不下面的模塊上不來 */ width:100%;/* 一定要設置100%，要不內容不夠稱不開整個頁面*/ background-color: blue; /* 默認還是整行 */ } .box .box-content .child { margin: 0 210px; /* 中間模塊空出左右距離，設置浮動 */ background: red; height: 100%; } .box .box-left { width: 200px; float: left; margin-left: -100%; /* 設置浮動， margin-left:-100% 可以使元素往上移一行，並且移動到最左邊*/ height: 300px; background-color: green; } .box .box-right { float: left; width: 200px; min-height: 100%; margin-left: -200px;/* 設置浮動， margin-left:負的自身寬度 可以使元素往上移一行，並且移動到最右邊 */ background-color: pink; } header,footer { height: 75px; background-color: aqua; } </style> </head> <body> <header> </header> <div class="box"> <div class="box-content"> <div class="child"> 中間主題內容 </div> </div> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body> </html>
1.2 其實只是簡單的中間內容自適應，還可以設置，中間的元素塊狀元素盒子模型為ie下的盒子模型，
再使用padding也是可以實現的
<style> .box{ height: 500px; background-color: bisque; position: relative; } .box .box-content { box-sizing:border-box; height: 100%; float: left; /* 一定要設置浮動，要不下面的模塊上不來 */ width:100%;/* 一定要設置100%，要不內容不夠稱不開整個頁面 */ /* 默認還是整行 */ padding:0 210px; } .box .box-content .child { /* 中間模塊空出左右距離，設置浮動 */ background-color: blue; height: 100%; } .box .box-left { width: 200px; float: left; margin-left: -100%; /* 設置浮動， margin-left:-100% 可以使元素往上移一行，並且移動到最左邊 */ height: 300px; background-color: green; } .box .box-right { float: left; width: 200px; min-height: 100%; margin-left: -200px;/* 設置浮動， margin-left:負的自身寬度 可以使元素往上移一行，並且移動到最右邊 */ background-color: pink; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-content"> <div class="child"><!-- 這個div只是為了方便看，設置了以下背景色 可用可不用，內容區還是自適應的 --> 中間主題內容 </div> </div> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body>
2，上面其實是聖杯布局，我們再使用中間相對定位，左右兩邊絕對定位（中間絕對定位，不設置寬度撐不開容器）
其實只要中間的位子對應了，左右兩邊不管是相對定位，還是絕對定位都可以
重點當然還是中間怎麽取定位（元素順序沒有關系）
如果中間取相對定位，不設置浮動，設置margin 空出左右距離，
兩邊取絕對定位，只要設置top:0 一個left:0 一個right:0
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>雙飛翼布局</title> <style> .box{ height: 500px; background-color: bisque; position: relative; overflow: hidden; } .box .box-content { position: relative; height: 100%; margin-left: 210px; margin-right: 210px; background-color: blue; } .box .box-left { width: 200px; position: absolute; height: 300px; left: 0; top:0; background-color: green; } .box .box-right { width: 200px; position: absolute; min-height: 100%; right: 0px; top:0; background-color: pink; } header,footer { height: 75px; background-color: aqua; } </style> </head> <body> <header> </header> <div class="box"> <div class="box-content"> <div class="child"> 中間主題內容asdasdasdsadsasda嘎達可根但是薩嘎薩嘎據阿裏就夠了及代理商解放螺
絲釘結案率放假啊了解 </div> </div> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body> </html>
3.我們再看下使用定位的雙飛燕布局， 雙飛燕，要對父容器設置padding ,大小等一左右固定寬度
左右兩邊據對定位，就這個和上面的方法差不多，我們一起看看左右兩邊相對定位
如果左右兩邊相對定位，設置margin和和left
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>雙飛翼布局</title> <style> .box{ height: 500px; background-color: bisque; position: relative; overflow: hidden; padding: 0 210px; } .box .box-content { height: 100%; float: left; background-color: blue; } .box .box-left { width: 200px; position: relative; height: 300px; float: left; left: -210px; margin-left: -100%; background-color: green; } .box .box-right { width: 200px; position: relative; min-height: 100%; float: left; margin-left: -200px; right: -210px; background-color: pink; } header,footer { height: 75px; background-color: aqua; } </style> </head> <body> <header> </header> <div class="box"> <div class="box-content"> 夠了及代理商解放螺絲釘結案率放假啊了解多嘎多gags廣東省水水水水水水水水水水
水水頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂 </div> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body> </html>
css常見的各種布局下----三列布局