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

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> 

而你已经完成！