css - 将现有网站转换为流体网格布局

Question

我有一个网站。我可以将我的网站转换为流体网格布局吗？是否有任何工具可以自动执行此操作，或者我是否必须创建一个流体网格（在 Dreamweaver 中）并插入<div>标签并将我的样式插入其中，最终将类似于我的网站。

Answer 1

据我所知，没有哪个工具可以为现有的开箱即用创建流体网格布局。这可能是因为这样的工具很难决定应该使用哪种网格结构。永远记住，在使用网格时，列的大小是固定的，因此可能与您使用像素精确的 css 样式创建的 css 不同。

不过，我推荐的是查看那里的许多框架。它们非常易于使用，您唯一需要做的就是将类名添加到您的 div 标签中。

流体网格框架列表

• 流体 960
• CSSGrid
• 引导程序
• 流体基线

还有大约一百万。如果您只是在寻找一个可以轻松实现而没有任何麻烦的网格系统，请使用 Fluid960。

编辑 假设您具有以下结构

<div style="width:100%">
 <div style="width:20%>First div</div>
 <div style="width:30%>Second div</div>
 <div style="width:50%>Third div</div>
</div>

在 16 格 960 框架的情况下，您需要将 100% 作为所有 16 列。因此 20%（所以你的第一个 div）需要是一个 3 格列，你的 30% 是一个 5 格列，你的 50% 是一个 8 格列。现在你有 3 + 5 + 8 = 16 列。在 HTML 中，您最终只需要编写

<div id="grid">
 <div class="grid_3"></div>
 <div class="grid_5"></div>
 <div class="grid_8"></div>
</div>

你完成了！