创造100% 自适应css布局的行之有效的方法

　　在流动布局中开发者最关心的是处理图像和内容，它们需要一定的宽度。大多数情况下，我们希望我们的图像尽可能的大，至少在太小时应防止任何令人尴尬的空白，在固定宽度的布局中，可手动调整，客服这些问题很容易。但是，在流动布局中，图像区域的宽度是不断变化的，这些问题就在此出现了。

　　自动杂志版面设计

　　这个解决方案需要一些聪明的数学知识和PHP，在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解释(包括数学)和可下载的源代码。标题由图像在杂志中如何呈现来决定：有条理且总是完美对齐。当然，一本杂志版面的设计师都必须经过一定的过程来实现这种效果，包括调整和手动放置。

　　对我们来说，这一技巧可以实现我们的效果，下面是脚本实现这一效果的第一个例子。

　　正如你所看到的那样，非常漂亮。但是，如何使用流动布局使其更具可用性?Harvey Kane 给了我们必须使用的脚本。

　　# include the class file

　　require_once('magazinelayout.class.php');

　　# Define the width for the output area (pixels)

　　$width = 600;

　　# Define padding around each image; this *must* be included

　　#in your style sheet (pixels)

　　$padding = 3;

　　# Define your template for outputting images

　　# (Don't forget to escape the &)

　　$template = '';

　　# create a new instance of the class

　　$mag = new magazinelayout($width,$padding,$template);

　　# Add the images in any order

　　$mag->addImage( 'landscape1.jpg' );

　　$mag->addImage( 'portrait1.jpg' );

　　$mag->addImage( 'landscape2.jpg' );

　　# display the output

　　echo $mag->getHtml();

　　我们可以事先定义我们所希望的图像杂志的宽度。因此，如果我们找到浏览器的宽度，我们就可以决定我们布局图像的宽度，这很容易。因为我们已经学会了第二种技巧：自适应内容的流动布局。在他的脚本中，Kevin Hale使用了一个称之为getBrowserWidth() 的方法，你可以在他的文章中更深入的了解该方法的代码。

　　如果我们用这种方法取代浏览器的宽度值，然后用这个值去寻找我们内容区域的像素宽度(不论图像放在那个区域)。比方说，我们希望将图像放到70%的内容区域中，利用简单的数学知识，我们只需要找到浏览器宽度值的70%就行。

　　Pixel width = 内容区域百分比 x 　浏览器宽度

　　$width = 0.70 x getBrowserWidth();

　　这是很基本的数学知识，是流动布局中处理图像最基本的方法，调整PHP脚本自动寻找图像的像素值。这样，在一个流动布局中，你就能很好的处理图像或其余已经设置宽度的内容。

最新评论