两招搞定三栏布局——圣杯布局、双飞翼布局

时间：2023-03-30 17:55:20 CSS

以下中间宽度自适应、左右栏固定宽度的布局如何实现？这是一道经典的面试题，常用的方法有：圣杯布局、双飞翼布局。相信看完这篇文章，你一定能够清楚的知道什么是圣杯和双飞翼。圣杯布局首先，让我们定义HTML结构：middle

left

右边的

再开始我们的布局，先给这三个div一个float:left，让它们都向左浮动。.middle,.left,.right{float:left;}接下来是最重要的两步，设置leftbox的margin-left:-100%，将leftbox往上拉，调整left的浮动位置框到框的中间左侧。然后设置右框的margin-left:-rightboxwidthpx，将右框往上拉，调整右框的浮动位置到中间框的右侧。.left{背景：粉色；宽度：300px；高度：300px；左边距：-100%；}.right{背景：粉色；宽度：300px；高度：300px；左边距：-300px；//300px是右边框的宽度}【*】这时候布局基本就出来了，只是中间框的左右两边会被左右两个框覆盖。这时候就需要通过相对定位来避免覆盖。给左右两个盒子position:relative，然后分别设置它们的left和right，控制父元素的padding左右两边留空。.left{位置：相对；左：-300px；}.right{位置：相对；right:-300px;}.container{border:1pxsolidblack;高度：300px；填充：0400px;}好的！大功告成，圣杯布局已经完成~双飞翼布局双飞翼的布局和圣杯布局基本类似。它的HTML结构是：MiddleLeftRight正面布局和圣杯一模一样，只是从[*]开始的步骤略有不同。通过设置inner_middle的左右外边距来避免左右框被双飞翼覆盖。.inner_middle{margin:0300px;}另外，整个布局的左右paddingmargin有些不同，所以只要将父框的padding设置为左右margin的宽度即可。.container{边框：1px纯黑色；高度：300px；padding:0100px;}这里还有第二种实现方式，HTML结构遵循圣杯布局的结构，通过设置左右padding避免中间框的内容。同时，为了避免布局混乱，还可以设置box-sizing:border-box，表示宽度包括border和padding，这样即使设置了right、left、rightpadding，其总宽度保持不变。.middle{背景：#ccc;宽度：100%；高度：300px；填充：0300px；框大小：边框框；}

上一篇：CSS遇到的坑

下一篇：伪元素可以做很多事情

两招搞定三栏布局——圣杯布局、双飞翼布局相关文章