适应性布局主要是浮动式的大盘布局，也被称为双翼布局，主要是通过浮动和边际负利润实现的。我希望你能很好地理解下面的例子。绝对位置布局也非常简单。




自适应布局是在实际应用中越来越普遍，今天分享几个自适应布局的演示，主要是浮动的圣杯（也叫飞翼布局，主要流动和利润负利润率达到使用），没有绝对定位布局，我认为你能理解我下面的几个例子，绝对定位布局很简单。

ps：布局有好处，随着渐进增强前端开发的概念，因为浏览器的分辨率是从DOM到页面，圣杯布局可以是DOM第一分析前的一个重要内容，而后面的内容则是DOM分辨率的次要内容。
下面的例子可以解决实际应用中绝大多数的自适应布局问题。有兴趣的童鞋可以研究，代码如下：

1。左侧固定，右侧自适应（圣杯布局的实现）：

复制代码代码如下所示：




非所有权文件

身体{边缘：0；填充：0 }
包装{宽度：100%；浮动：左}
。内容{身高：300px；背景：绿色；margin-left: 200px }
。右{宽度：200px；身高：300px；背景：红色；浮动：左；margin-left: 100% }




内容

一边



2。在左边和右边（圣杯的实现）：

复制代码代码如下所示：




非所有权文件

身体{边缘：0；填充：0 }
包装{宽度：100%；浮动：左}
。内容{身高：300px；背景：绿色；右边距：200px }
。右{宽度：200px；身高：300px；背景：红色；浮动：左；margin-left: - 200px；}




内容

一边



三.左右固定，中间自适应：

复制代码代码如下所示：




非所有权文件

身体{边缘：0；填充：0 }
包装{宽度：100%；浮动：左}
。内容{身高：300px；背景：绿色；margin-left: 200px；右边距：200px }
。左{宽度：200px；身高：300px；浮动：左；背景：黄色；margin-left: 100% }
。右{宽度：200px；身高：300px；背景：红色；浮动：左；margin-left: - 200px }




内容

一边
一边