三、 流动布局中的图像
在流动布局中开发者最关心的是处理图像和内容，它们需要一定的宽度。大多数情况下，我们希望我们的图像尽可能的大，至少在太小时应防止任何令人尴尬的空白，在固定宽度的布局中，可手动调整，客服这些问题很容易。但是，在流动布局中，图像区域的宽度是不断变化的，这些问题就在此出现了。
自动杂志版面设计
这个解决方案需要一些聪明的数学知识和PHP，在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解释（包括数学）和可下载的源代码。标题由图像在杂志中如何呈现来决定：有条理且总是完美对齐。当然，一本杂志版面的设计师都必须经过一定的过程来实现这种效果，包括调整和手动放置。
对我们来说，这一技巧可以实现我们的效果，下面是脚本实现这一效果的第一个例子。
正如你所看到的那样，非常漂亮。但是，如何使用流动布局使其更具可用性？Harvey Kane 给了我们必须使用的脚本。
|
以下为引用的内容： # include the class file # Define the width for the output area (pixels) # Define padding around each image; this *must* be included # Define your template for outputting images # create a new instance of the class # Add the images in any order # display the output echo $mag->getHtml(); |
我们可以事先定义我们所希望的图像杂志的宽度。因此，如果我们找到浏览器的宽度，我们就可以决定我们布局图像的宽度，这很容易。因为我们已经学会了第二种技巧：自适应内容的流动布局。在他的脚本中，Kevin Hale使用了一个称之为getBrowserWidth（） 的方法，你可以在他的文章中更深入的了解该方法的代码。
如果我们用这种方法取代浏览器的宽度值，然后用这个值去寻找我们内容区域的像素宽度（不论图像放在那个区域）。比方说，我们希望将图像放到70%的内容区域中，利用简单的数学知识，我们只需要找到浏览器宽度值的70%就行。
|
以下为引用的内容： Pixel width = 内容区域百分比 x 浏览器宽度 |
这是很基本的数学知识，是流动布局中处理图像最基本的方法，调整PHP脚本自动寻找图像的像素值。这样，在一个流动布局中，你就能很好的处理图像或其余已经设置宽度的内容。
（举报）
