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

Question

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

Answer 1

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

不过，我推荐的是查看那里的许多框架。它们真的很容易使用，你唯一需要做的就是在你的 div 标签中添加类名。

流体网格框架列表

• Fluid 960
• CSSGrid
• Bootstrap
• FluidBaseline

还有大约一百万。如果您只是在寻找一个可以轻松实现且没有任何麻烦的网格系统，请使用 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>

你就完成了！