实现常用布局
两栏布局
三栏、圣杯、双飞翼
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）圣杯布局 relative margin-left: -100%;
<style> .container { padding: 0px 100px; min-width: 300px; overflow: hidden; }.left { float: left; position: relative; left: -100px; margin-left: -100%; width: 100px; background-color: red; }
.center { float: left; width: 100%; background-color: green; }
.right { float: left; position: relative; left: 100px; margin-left: -100px; width: 100px; background-color: blue; } </style> </head>
<body> <div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div> </body>
缺陷
- 某一列内容溢出时，三栏不是等高的 进行登高布局解决
- 中间栏的最小宽度不能小于左右两栏的宽度，否则左右两栏会掉到下一行。（min-width解决）
双飞翼布局
margin-left:-100% margin-left:-100px 牛逼
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
双飞翼布局
优点：省去了很多css，由于不使用定位，中间栏的最小宽度不再受限于左右两栏宽度
缺点：双飞翼布局多加一层dom树节点，三列登高问题仍要单独解决
可是说出多种方式并理解其优缺点
标签：圣杯,width,布局,100px,双飞翼,HTML,margin,left From： https://www.cnblogs.com/alwaysrun/p/17181419.html