css布局中左側(cè)固定右側(cè)自適應(yīng)

DandJ 發(fā)布于2019-08-30 14:09 / 908人閱讀

摘要：所以說(shuō)第二種還是不錯(cuò)的，不少大家都會(huì)誤解有時(shí)候在和定位都可以實(shí)現(xiàn)的時(shí)候，到底要采用哪種方式，我覺(jué)得那要看你想要兼容哪種瀏覽器，主流的非兩種都很不錯(cuò)，但是中關(guān)于的太多

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

定位
在固定元素上加入絕對(duì)定位，自適應(yīng)元素設(shè)置成margin-left:固定元素的寬度

主流瀏覽器都是支持的 包括IE6，除了這些還可以進(jìn)行擴(kuò)展 例如：，在兩個(gè)元素加上border，就可以實(shí)現(xiàn)，如果采用第一種方法 IE7 是不支持 顯示的效果會(huì)是這樣。
所以說(shuō) 第二種還是不錯(cuò)的，不少大家都會(huì)誤解有時(shí)候 在float和定位都可以實(shí)現(xiàn)的時(shí)候，到底要采用哪種方式，我覺(jué)得那要看你想要兼容哪種瀏覽器，主流的（非IE6）兩種都很不錯(cuò)，但是IE中關(guān)于float的bug 太多

GPU云服務(wù)器云服務(wù)器 css自適應(yīng) css圖片自適應(yīng) asp 自適應(yīng)css 固定布局

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115810.html

相關(guān)文章

七種實(shí)現(xiàn)左側(cè)固定，右側(cè)自適應(yīng)兩欄布局的方法

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

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

摘要：清單一些說(shuō)明注意文檔的書(shū)寫(xiě)順序，先寫(xiě)兩側(cè)欄，再寫(xiě)主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到。可以通過(guò)設(shè)置的屬性或使用雙飛翼布局避免問(wèn)題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。本文首發(fā)于知乎專(zhuān)欄：前端指南 CSS布局布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

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

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

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

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

isaced 2019-08-29 14:21 評(píng)論0 收藏0
常見(jiàn)的面試問(wèn)題：【CSS】已知高度，寫(xiě)出三欄布局

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

MobService 2019-08-02 15:33 評(píng)論0 收藏0