1. 程式人生 > >CSS 分欄結構

CSS 分欄結構

CSS 固定左側導航欄 left----左側選單 cont -- 實際內容 right  ---右側附加內容   兩欄佈局---左側高度為內容撐開的高度     方法一:【壞處是需要 float】     left: position: fixed; /  display: list-item ;    width: 150px;float: left; height: 100%;     cont :  margin-left: 170px;  【position: relative;   可以不要】 因為此方法中,left 已經使用了 position: fixed ; 則左側選單的高度自由/ 100% 。對 cont 沒有影響。        方法二: 【 table  好處是不用 float 】     left-01:  display: inline-table  /   inline-block / table /  table-cell  / list-item ; width: 150px;  給成內聯可定寬度的元素即可     cont-01:  position: absolute; right: 0; left: 170px; right:0;  當左側選單高度不固定時使用。 ---佔用剩餘空間  【可以有也可以沒有 display: table-cell 】       left-01:  display: inline-table  /   inline-block / table /  table-cell  / list-item ; width: 150px; height: 100%;  position: fixed;     cont-02:   直接  margin-left : 170px; 即可 ----當左側選單高度 height: 100%, position: fixed 時使用;       方法三:     外層 div  加入  display: flex  ---彈性盒模型。預設橫向排列。     left:  flex: 30%;     right: flex: 70%