另一种简单方法实现中间宽度自适应，请问这种写法合适吗？

如题，无意中发现了这种方法，就是不给mid设置宽度，只把left和right进行浮动，可以达到和双飞翼圣杯布局同样的效果，想问老师这种写法是否有别的问题，谢谢

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

.left{

width: 200px;

height: 200px;

position: absolute;

top: 0;

left: 0;

background-color: red;

}

.right{

width: 200px;

height: 200px;

position: absolute;

top: 0;

right: 0;

background-color: green;

}

.mid{

height: 200px;

background-color: yellow;

margin: 0 200px 0 200px;

}

</style>

</head>

<body>

<div class="mid">中间宽度自适应</div>

</div>

</body>

</html>

源自：CSS网页布局基础 3-4 双飞翼布局及案例

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2017-11-30 16:55:28

你好，代码具有灵活性，实现效果的方法不唯一，这里兼容性是没有问题的，渲染优先级的话调整下位置也是可以的，不过，在不同的设备下，分辨率会有点影响，你可以尝试缩小下窗口看下效果。

祝学习愉快~

一路电光带火花 2017-11-30 16:20:05

按照代码由上而下执行，应该会先渲染左边了吧，这个方法的确简单，但是本质不一样，就不叫圣杯布局或者双飞翼这种布局了吧，

提问者夜sama #1

把.mid写在left 和right的前面就行了，效果不变。而且说到底 "圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。” 我只是提出一种效果相同的写法，并且想知道兼容性和渲染的优先级是否一样

2017-11-30 16:25:51