css
/* 圣杯 */.main {margin-left: 200px;margin-right: 300px;}.left {position: relative;left: -200px;}.right {position: relative;right: -300px;}
解决了遮挡,但是当屏幕缩小,布局会乱!!!
html
// center 加个div 文字放里面 <div class="center"><div class="inner">中间自适应</div></div>
css
/* 双飞翼 */.inner {/* height: 100%; */margin:0 300px 0 200px;border: 2px solid red;}
<!DOCTYPE html><html><head><meta charset="utf-8"><title>圣杯-flex</title></head><style>#header,#footer {background: yellowgreen;height: 60px;line-height: 60px;}#container {display: flex;}#container .column {height: 300px;line-height: 300px;}#center {flex-grow: 1;background: gray;}#left {width: 200px;order: -1;background: beige;}#right {width: 200px;background:paleturquoise;}</style><body><div id="header">#header</div><div id="container"><div id="center" class="column">#center</div><div id="left" class="column">#left</div><div id="right" class="column">#right</div></div><div id="footer">#footer</div></body></html>