双飞翼布局

实现原理：

1.将三者都设置float:left;

2.middlw:width:100%; 沾满一行；所以要把left拉到middle所在行的最左边，使用 margin-left:-100%，同理right使用 margin-left:-200px

4.此时middle的内容被覆盖，要把middle的内容拉出来，除了使用外围container的padding，还可以考虑使用margin，给middle增加一个内层div -- middle_content, 然后设置 margin:0 210px

5.middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px

6.同理，right要拉到middle所在行的最右边，使用 margin-left:-210px，right:-210px

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容