1.左側絕對定位法 直接看代碼: 效果如下: 關鍵點在於.left的position:absolute和.right的margin-left:300px; 2.左側浮動法(右側不浮動) 效果如下: 關鍵點:左側設置左浮動,右側設置 ...
今天做了一個練習,要求用兩種方法來實現左側寬度固定 右側寬度自適應的兩列布局。一開始我以為會很簡單,畢竟只是練習,但是我寫出了一種方法之后卻沒能順利的寫出第二種方法。對於網上的一些解決方法我還是不太滿意,於是自己繼續琢磨着,問問一些前輩,希望得到一些思路。終於,皇天不負有心人,在自己翻譯的一篇關於BFC的文章上,我找到了解決的方法。 關於左側寬度固定,右側寬度自適應兩列布局的一種很常用的方法我相 ...
2015-08-22 18:38 9 18284 推薦指數:
1.左側絕對定位法 直接看代碼: 效果如下: 關鍵點在於.left的position:absolute和.right的margin-left:300px; 2.左側浮動法(右側不浮動) 效果如下: 關鍵點:左側設置左浮動,右側設置 ...
附:傳統模式(利用float浮動實現) ...
不管是左是右,反正就是一邊寬度固定,一邊寬度自適應。 博客園的很多主題也是這樣設計的,我的博客也是右側固定寬度,左側自適應屏幕的布局方式。 html代碼: 實現方式方式有如下幾種: 1.固定寬度區浮動,自適應區不設寬度而設置 margin 我們以右側寬度固定,左側寬度自適應 ...
效果圖 代碼實現 ...
(css布局所要實現的效果) 在前端面試中經常會被問到CSS布局,兩列布局,左側固定,右側自適應。前幾天去面試,遇到了這道題的升級版,要求左側可拖動,右側要有水平滾動條。拿到題目確實有些大腦短路,不知道如何實現左側可拖動的效果,面試官最后給的提示是設置resize屬性+flex布局 ...
https://blog.csdn.net/qq_22889599/article/details/78414040 反過來也可以:左側寬度固定,右側自適應。不管是左是右,反正就是一邊寬度固定,一邊寬度自適應。 這種布局比較常見,博客園很多默認主題就是這種。一般情況下,這種布局中寬度固定的區域 ...
反過來也可以:左側寬度固定,右側自適應。不管是左是右,反正就是一邊寬度固定,一邊寬度自適應。 這種布局比較常見,博客園很多默認主題就是這種。一般情況下,這種布局中寬度固定的區域是側邊欄,而自適應的區域是主體內容區——相信把側邊欄搞成自適應的人很少吧? 要實現這種布局,也算比較簡單。我們先給 ...
第一種:左側用margin-right,右側float:right CSS代碼: html代碼: 第二種:左側同樣用margin-right 右側采用絕對定位 CSS代碼(只需要把第一種注釋部分替換即可): 第三種:左右 ...