三种自适应宽度的网页布局方法

三种自适应宽度的网页布局方法三种我很熟悉

一、前言
在每个分辨率显示N英尺间隔期间，页面使用流动性布局（或自适应布局）是一个不错的选择。当然，具体实现不是那么容易，需要一些CSS的力量和实践经验。本文不谈细节，只谈外部自适应结构，这是实现整个页面自适应的前提。现在，在浏览器中，我知道从三条栏的左到右的宽度是三：绝对定位法、余量法和负浮动法。这些方法简单实用，不存在兼容性问题。如果您想使用页面上的流动性布局，我相信这篇文章会给您一些启发。

两。网页宽度自适应布局的三种方法
为了演示首先需要定义布局结构，在下面的例子中：左、右三列布局，左右两列固定宽度（不固定宽度值到中间列宽度的百分比，可以）。左右两列的宽度为200像素。

1，绝对定位法
这可能是最容易理解的三种方式：两列绝对定位，固定在页面的左右两侧，中间的主栏是用左右边距来展开距离。实现了三列自适应布局。

你可以点击这里：绝对定位演示演示。

CSS代码如下（用于截图）：
绝对定位法下的CSS代码

HTML代码是（图片）：
绝对定位法HTML代码

左边和右边的三是div的顺序可以调整，而其余两个的方法是不一样的，需要注意。

这种方法的优点是易于理解，上部结构简单，在内部元素影响下破坏布局的概率较低，即多站起来。
缺点是：如果中间条具有最小宽度限制或内部元素宽度，当浏览器宽度小到一定程度时，将出现层重叠。然而，在正常情况下，用户不会缩小浏览器小于1000像素，除非用户分辨率是> = 1600像素宽，因此缺陷危险指数为3。

2，边际负价值法
这个方法在实际的网站上最常用，我个人觉得有点怀疑。这种方法很难用一句话加以总结。首先，中间的身体应该使用双标签。外层div的宽度是100%，它是浮动的（左边浮动的例子是下面的基础）。内部div是真正的主体内容，包含大约210像素的边距值。左栏和右栏中使用保证金的不利位置，左栏的左、左边界100%，与前面的浏览器宽度的div 100%，所以这里的100%的差额价值是div左栏位于页面的左边；右边是左浮动的幅度，左为负，自身规模的大小，宽度为200像素。

请看下面的CSS代码：
CSS代码图片版的页边负定位法

HTML代码：
边际负价值法HTML代码部分

你可以点击这里：保证金负值演示演示

你需要注意几个div的顺序，不管它是左浮动还是右浮动，第一部分是div，它是正的。至于这两个专栏，谁会是第一个，没关系。我测试了IE6，Firefox和Chrome浏览器。

这种方法的优点是：三列相互关联，真正意义上的自适应，具有一定的抵抗力，布局不受内部影响的影响。
缺点是比较难理解，不容易起床，代码比较复杂。有一个百分比的宽度，太多的负面定位，如果布局的错误，这是不容易检查。

三.自浮式法
这个方法是最简单的代码。标记浮动跟随的特性被应用。左栏浮动在左，右栏浮动，主体直接放置在后面，实现了自适应。

你可以点击这里：自浮法演示演示

CSS代码如下所示：
自浮法CSS代码

HTML代码：
自浮法HTML代码

这里的三个div标签的顺序的关键是把主div放在最后，左边和右边两列按div顺序排列。

这种方法的优点是代码简洁高效。
不足之处在于：中间主体有明星，有明确：既有属性。如果您想使用此方法，则需要避免