將現有網站轉換爲流體網格佈局

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> 

而你已經完成！