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

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>

你完成了！