css實現(xiàn)六種自適應兩欄布局方式
發(fā)布時間:2020-10-28 16:35:45 作者:哎呀呀
我要評論

這篇文章主要介紹了css實現(xiàn)六種自適應兩欄布局方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
html結構
<body> <div class="wrapper"> <div class="left"></div> <div class="right"></div> </div> </body>
方法一:flex布局
.wrapper{ display:flex; } .left{ width:200px; height:400px; background:black; } .right{ flex:1; height:400px; background:red; }
方法二:浮動
.left{ float:left; width:200px; height:400px; background:black; } .right{ background:red; height:400px; }
方法三:BFC
.left{ width:200px; height:400px; float:left; background:black; } .right{ overflow:hidden; height:400px; background:red; }
方法四:position絕對定位
.wrapper{ position:relative; } .left{ width:200px; height:400px; background:black; } .right{ position:absolute; top:0; left:200px; right:0; bottom:0; background:red; }
方法五:table布局
.wrapper{ display:table; width:100%; } .left,.right{ display:table-cell; height:400px } .left{ background:black; } .right{ background:red; }
方法六:grid布局
.wrapper{ display:grid; width:100%; height:400px; grid-template-columns:200px auto; } .left{ background:black; } .right{ background:red; }
到此這篇關于css實現(xiàn)六種自適應兩欄布局方式的文章就介紹到這了,更多相關css 自適應兩欄布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
css display table 自適應高度、寬度問題的解決
這篇文章主要介紹了css display table 自適應高度、寬度問題的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著2021-05-07- 這篇文章主要介紹了詳解CSS多種三列自適應布局實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習2021-02-24
- 這篇文章主要介紹了CSS實現(xiàn)背景圖片屏幕自適應的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學2020-12-07
- css3實現(xiàn)自適應瀏覽器圖片布局特效是一款自適應瀏覽器屏幕的水平列表div容器,好友頭像列表水平布局特效。2020-11-23
CSS實現(xiàn)表格首行首列固定和自適應窗口的實例代碼
這篇文章主要介紹了CSS實現(xiàn)表格首行首列固定和自適應窗口的實例代碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11- 這篇文章主要介紹了CSS將img圖片填滿父容器div并自適應容器大小,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編2020-10-23
css實現(xiàn)兩欄布局,左側固定寬,右側自適應的多種方法
今天通過7種方法給大家介紹css實現(xiàn)兩欄布局,左側固定寬,右側自適應效果,每種方法通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2021-08-04