鍦ㄩ〉闈㈠紑鍙戜腑锛屽綋鎴戜滑鎷垮埌璁捐甯堢粰鐨刄I鍥炬椂锛岄鍏堣€冭檻鐨勫氨鏄竷灞€闂锛岃€屽鏍忓竷灞€浼氭槸鎴戜滑閬囧埌鏈€澶氱殑甯冨眬闂锛屼釜浜烘€荤粨浜嗗紑鍙戜腑甯歌鐨勫鍒楀竷灞€闂鐨勮В鍐虫柟娉曘€傛寜鏍忕洰鏁板彲鍒嗕负涓ゆ爮寮忓竷灞€銆佷笁鏍忓紡甯冨眬銆佸鏍忓紡甯冨眬銆傚竷灞€鏂规硶鐨勫師鐞嗘槸鐩镐技鐨勩€傜洰褰?.鍥哄畾瀹藉害+鑷€傚簲涓ゆ爮甯冨眬2.涓ゆ爮鍥哄畾瀹藉害锛屼竴鏍忚嚜閫傚簲甯冨眬3.宸﹀彉瀹斤紝鍙宠嚜閫傚簲甯冨眬4.澶氭爮鍙樺锛屼竴鏍忚嚜閫傚簲5.绛夊甯冨眬鏂规6涓€銆佺瓑楂樺竷灞€鏂规锛堟枃涓璫ss浠ｇ爜涓殑棰滆壊闇€瑕佽嚜宸辨坊鍔狅級1銆佸浐瀹氬搴?鑷€傚簲涓ゆ爮甯冨眬 left
right
left
center
right
闇€姹備竴锛歀eft鍜宑enter鍥哄畾涓?00px锛宺ight鑷€傚簲銆傞渶姹?锛氬乏鍙冲搴﹀潎涓?00px锛屽眳涓嚜閫傚簲銆傞渶姹備竴涓娇鐢ㄧ殑鏂规硶鍚屼笂锛岃繖閲屼笉鍐嶈禈杩般€傞噸鐐逛互闇€姹?涓轰緥銆傛柟寮忎竴锛氱埗鍏冪礌鐩稿甯冨眬锛屽瓙鍏冪礌缁濆甯冨眬銆俻arent{position:relative;}.left{position:absolute;宸︼細0px锛涢《閮細0px锛涘搴︼細100px;}.right{浣嶇疆锛氱粷瀵?鍙筹細0px锛涢《閮細0px锛泈idth:100px;}.center{margin:0120px;}鏂规硶浜岋細flexlayout.parent{display:flex;}.left,.right{width:100px;}.left{margin-right:20px;}.right{margin-left:20px;}.center{flex:1;}鏂规硶涓夛細鍙岄缈煎竷灞€鍙岄缈煎竷灞€闇€瑕佹帹杩涗腑蹇冨潡锛岄渶瑕佸湪涓績宓屽叆鍖呰９鍧楋紝鏂逛究璁剧疆闂磋窛銆傛敞鎰忓綋璁剧疆centerwidth涓?00%鏃讹紝闇€瑕佸皢centerboxmodel杞崲涓篒Eboxmodel锛屼娇鍏跺搴﹀寘鍚玴adding銆?divclass="parent">center
left
right
.center,.left,.right{float:left;}.left{瀹藉害锛?00px锛沵argin-left:-100%;}.right{width:100px;margin-left:-100px;}.center{box-sizing:border-box;瀹藉害锛?00%锛沺adding-left:120px;padding-right:120px;}.content{height:100%;}3.宸︿晶鍙彉瀹藉害锛屽彸渚ц嚜閫傚簲甯冨眬left
right
瑕佹眰锛氬乏渚у彲鍙樺搴︼紝鍙充晶鑷€傚簲锛岄棿璺?0px銆傛柟娉曚竴锛歠loat+overflow.left{float:left;margin-right:20px;}.right{overflow:hidden;}鏂规硶浜岋細琛ㄦ牸甯冨眬鐨勫搴︽槸鐢卞唴瀹瑰喅瀹氱殑锛屼笉鏄敱甯冨眬鍐冲畾鐨勩€傚彇娑坱able-layout:fixedFunction.parent{display:table;width:100%;}.left,.right{display:table-cell;}.left{width:0.1%//鍙栨渶灏忓搴︼紝瀹為檯瀹藉害鐢卞唴瀹瑰喅瀹歱adding-right:20px;}鏂规硶涓?flex.parent{diaplay:flex;}.left{margin-right:20px;}.right{flex:1;}4.澶氬垪鍙彉瀹藉害锛屼竴鍒楄嚜閫傚簲鐩稿悓3.宸︿晶鍙彉瀹藉害锛屽彸渚ц嚜閫傚簲甯冨眬鏂瑰紡鏄竴鏍风殑銆?.绛夊甯冨眬瑙ｅ喅鏂规column1
column2
column3
column4
瑕佹眰锛氬鍒楃瓑瀹斤紝闂磋窛淇濇寔20px銆傛柟娉曚竴锛歮argin+float杩欐椂鍊欏氨闇€瑕佽€冭檻澶氫釜闂磋窛鐨勯棶棰樸€傜己鐐癸細闇€瑕佹彁鍓嶇煡閬撴湁澶氬皯鍒楋紝鎵嶈兘璁＄畻姣忓垪鐨勫姣?闂磋窛銆傚叿浣撴潵璇村氨鏄鐖跺厓绱犲鍑?0px鐨勫搴︺€?parent{margin-left:-20px;}.column{float:left;瀹藉害锛?5%锛涘乏濉厖锛?0px锛沚ox-sizing:border-box;}鏂规硶浜岋細姝ゆ椂table闇€瑕佸湪鐖跺厓绱犲闈㈠啀娣诲姞涓€灞俠oxparent-layout锛岃缃搴﹀鍔?0px鐨勫搴︺€?divclass="parent-layout">column1
column2
column3
column4
div>.parent-layout{margin-left:-20px;}.parent{display:table;瀹藉害锛?00%锛泃able-layout:fixed;}.column{display:table-cell;padding-left:20px;}鏂规硶涓夛細flex.parent{display:flex;}.column{flex:1;}.column+.column{margin-left:20px;}鍏€佺瓑楂樺竷灞€鐨勮В鍐虫柟娉曟槸瑙ｅ喅鍒嗘爮闂鍙﹀锛屾垜浠繕闇€瑕佽В鍐冲垎鏍忓悗绛夐珮甯冨眬鐨勮В鍐虫柟娉曪細鏂规硶涓€锛氳〃鏍煎埄鐢ㄨ〃鏍煎崟鍏冩牸鏈韩鐨勭瓑楂樼壒鎬с€俻arent{鏄剧ず锛氳〃鏍硷紱瀹藉害锛?00%锛涜〃鏍煎竷灞€锛氬浐瀹氾紱}銆俵eft,.right{display:table-cell;}.left{width:100px;border-right:20pxsolidtransparent;鑳屾櫙鍓緫锛氬～鍏呮锛?/鐢变簬鏄痓order-box锛岄渶瑕佸幓鎺夎儗鏅壊}鏂规硶浜岋細flex.parent{display:flex;}.left{width:100px;margin-right:20px;}.right{flex:1;}鏂规硶涓夛細floatpseudo-contour.left,.right{flex:left;瀹藉害锛?00%锛沵argin-right:20px;}.right{overflow:hidden;}.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}.parent{overflow:hidden;}锛堟枃瀛楁牱寮忎唬鐮佷腑鑳屾櫙鑹插彲鑷娣诲姞锛夎鏄庯細BFC锛堝潡绾ф牸寮忓寲涓婁笅鏂囷級锛屽彲浠ヤ笌娴姩鍏冪礌鍏卞瓨锛屼笉浼氬睆钄芥诞鍔ㄥ厓绱狅紝閫氳繃overflow:hidden锛屼綔鐢細閬垮厤margincollapse锛屼笉琚诞鍔ㄥ厓绱犺鐩栵紝BFC鍙互Float鍜宑learcontent鍏冪礌閬垮厤heightcollapse銆傚枩娆㈠氨鐐逛釜璧炲惂馃槤锛堝畬锛?/p>