css布局中左側固定右側自適應

DandJ 發布于2019-08-30 14:09 / 901人閱讀

摘要：所以說第二種還是不錯的，不少大家都會誤解有時候在和定位都可以實現的時候，到底要采用哪種方式，我覺得那要看你想要兼容哪種瀏覽器，主流的非兩種都很不錯，但是中關于的太多

float 單一層浮動法
左側固定成100px; 則核心代碼左側：width:100px;float:left; 右側 width:auto;margin-left:100px;
絕大瀏覽器是沒有任何問題的，除了萬惡的瀏覽器IE6，兩層中間有縫隙 3px;

定位
在固定元素上加入絕對定位，自適應元素設置成margin-left:固定元素的寬度

主流瀏覽器都是支持的包括IE6，除了這些還可以進行擴展例如：，在兩個元素加上border，就可以實現，如果采用第一種方法 IE7 是不支持顯示的效果會是這樣。

所以說第二種還是不錯的，不少大家都會誤解有時候在float和定位都可以實現的時候，到底要采用哪種方式，我覺得那要看你想要兼容哪種瀏覽器，主流的（非IE6）兩種都很不錯，但是IE中關于float的bug 太多

云服務器 GPU云服務器 css自適應 css圖片自適應 asp 自適應css 固定布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115810.html

七種實現左側固定，右側自適應兩欄布局的方法

摘要：總結一下左邊固定，右邊自適應的兩欄布局的七種方法。基本的樣式是，兩個相距左側寬基本的樣式是，兩個盒子相距左側盒子寬，右側盒子寬度自適應。沒有清除浮動的方法，若左側盒子高于右側盒子，就會超出父容器的高度。總結一下左邊固定，右邊自適應的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex布局與grid布局。并非所有的布局都會在開發中使用，但是其中也會涉及...

luffyZh 2019-08-29 13:11 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0
【CSS】三欄/兩欄寬高自適應布局大全

摘要：方案一方案二和方案的有點是兼容性好因為都是比較老的解決方案了缺點是之后需要清除浮動造成的影響定位的話就是絕對定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動端主流的方案的語法缺點就是以下不支持。頁面布局注意方案多樣性、各自原理、各自優缺點、如果不定高呢、兼容性如何三欄自適應布局,左右兩側300px,中間寬度自適應 (1) 給出5種方案方案一: float (左右浮動,中間...

jindong 2019-08-01 18:28 評論0 收藏0
【CSS】三欄/兩欄寬高自適應布局大全

摘要：方案一方案二和方案的有點是兼容性好因為都是比較老的解決方案了缺點是之后需要清除浮動造成的影響定位的話就是絕對定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動端主流的方案的語法缺點就是以下不支持。頁面布局注意方案多樣性、各自原理、各自優缺點、如果不定高呢、兼容性如何三欄自適應布局,左右兩側300px,中間寬度自適應 (1) 給出5種方案方案一: float (左右浮動,中間...

isaced 2019-08-29 14:21 評論0 收藏0
常見的面試問題：【CSS】已知高度，寫出三欄布局

摘要：問題已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應回答效果示例解決方案浮動絕對定位彈性布局表格布局網格布局。方案二絕對定位將和的都設置脫離文檔流，給的設置左右兩邊距離即左右兩邊盒子的實際寬度。問題：已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 評論0 收藏0