【CSS学习总结】两边宽度固定，中间宽度自适应的布局方法

xiaoxiao2022-07-05 149

一、圣杯布局（左浮动、负边距、相对定位）

中间列的三栏float布局，中间栏放在文档流前面保证最先加载。关键在于如何使中间列的内容不被遮挡。

父元素盒container设置padding值；三个子元素都浮动float:leftcenter中间栏设置width:100%;left左边栏设置margin-left:-100%(移动到容器内的最左边);position:relative; left:-宽度值(移动到容器左边padding预留出来的位置)right右边设置margin-left:-宽度值;position:relative; right:-宽度值圣杯布局用到了浮动、负边距、相对定位； <!DOCTYPE html> <html> <head> <title>圣杯布局-双飞翼布局</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="圣杯布局.css"> </head> <body> <div id="header">header</div> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> </html> *{ margin: 0; padding: 0; } #header{ height: 50px; text-align: center; background-color: lightblue; } #container{ padding: 0 200px;/*左右栏通过margin到了正确位置，这行代码保证了中间栏的位置*/ height: 100px; text-align: center; } #center{ float: left; width: 100%; height: 100px; background-color: pink; } #left{ float: left; position: relative; left: -200px; margin-left: -100%; width: 200px; height: 100px; background-color: blue; } #right{ float: left; position: relative; right: -200px; margin-left: -200px; width: 200px; height: 100px; background-color: green; } #footer{ height: 50px; width: 100%; text-align: center; background-color: lightgreen; }

二、双飞翼布局（左浮动、负边距.双飞翼布局的下一个元素需要清除浮动）

两边宽度固定，中间宽度自适应。三列float:left; 中间栏宽度100%，在中间栏的div里面再嵌套一个div，对嵌套的div设置margin-left和margin-right。

中间栏center内嵌一个inside。center宽度100%；inside设置margin值预留左右两栏位置；左边栏left设置margin-left:100%;右边栏设置margin-left : -右边宽度值;双飞翼布局用到了左浮动、负边距 <!DOCTYPE html> <html> <head> <title>双飞翼布局</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="双飞翼布局.css"> </head> <body> <div id="header">header</div> <div id="middle"> <div id="inside">inside</div> </div> <div id="left">left</div> <div id="right">right</div> <div id="footer">footer</div> </body> </html> *{ margin: 0; padding: 0; } #header{ width: 100%; height: 50px; text-align: center; background-color: orange; } #middle{ float: left; height: 200px; width: 100%; text-align: center; background-color: red; } #inside{ margin: 0 200px; height: 100%; text-align: center; background-color: green } #left{ float: left; width: 200px; height: 200px; margin-left: -100%; text-align: center; background-color: yellow; } #right{ float: left; width: 200px; height: 200px; margin-left: -200px; text-align: center; background-color: lightblue; } #footer{ float: left; width: 100%; height: 50px; text-align: center; background-color: blue; }

三、弹性布局【flex】

父元素设置为弹性盒，并且flex-wrap:nowrap(不换行)子元素设置排列顺序（order，数值越小排列越靠前）中间栏设置（flex:1，表示填充满剩余位置） <!DOCTYPE html> <html> <head> <title>弹性盒布局</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="flex布局.css"> </head> <body> <div id="header">header</div> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> </html> *{ margin: 0; padding: 0; } #header{ height: 100px; text-align: center; background-color: blue; } #container{ display: flex;/*中间弹性盒布局*/ flex-wrap: nowrap;/*排列不下时不换行*/ height: 200px; text-align: center; background-color: pink; } #center{ order: 1;/*order定义item的排列顺序，默认为0，越小越靠前。left为0，center为1，right为2*/ flex: 1;/*填充满剩余位置*/ height: 200px; background-color: orange; } #left{ order: 0;/*order定义item的排列顺序，默认为0，越小越靠前。left为0，center为1，right为2*/ height: 200px; width: 200px; background-color: green; } #right{ order: 2;/*order定义item的排列顺序，默认为0，越小越靠前。left为0，center为1，right为2*/ height: 200px; width: 200px; background-color: lightblue; } #footer{ height: 100px; text-align: center; background-color: yellow; }

四、两边绝对定位，中间100%宽度（父相子绝）

父元素相对定位relative，子元素三列左右两栏绝对定位absolute，设置left/right为0，top为0；中间一栏自适应，设置margin：0 左右宽度px;

<!DOCTYPE html> <html> <head> <title>两边绝对定位，中间100%</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="绝对定位-中间100%.css"> </head> <body> <div id="header">header</div> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> </html> *{ margin: 0; padding: 0; } #header{ height: 50px; width: 100%; text-align: center; background-color: blue; } #container{ position: relative; text-align: center; background-color: green; } #center{ height: 200px; margin: 0 200px; background-color: red } #left{ position: absolute; left: 0; top: 0; height: 200px; width: 200px; background-color: pink; } #right{ position: absolute; right: 0; top: 0; height: 200px; width: 200px; background-color: orange; } #footer{ width: 100%; height: 50px; text-align: center; background-color: blue; }

最新回复(0)