將基於表格佈局的列跨距轉換爲自舉響應式設計

爲響應式設計實現了引導程序，但現在輸入要求與附加的jsfiddle相同。系統輸入來自Tabular佈局，用戶可以在列寬和行跨度中添加元素，但是當我將其轉換爲基於Div的自適應設計時，它不起作用。我試過div解決方案，但使用絕對位置，它不適用於響應式設計。任何幫助轉換山坳跨度，基於表格佈局的行跨度來引導響應式設計將基於表格佈局的列跨距轉換爲自舉響應式設計

感謝，

http://jsfiddle.net/V6gEL/

HTML：

<div class="col-span">1</div> 
<div class="left row-span">3</div> 
    <div class="middle">4</div> 

<div class="row-span " style="top=0px; left: 240px;">2</div> 


<div class="right col-span " style="top:240px; left:120px;">5</div>

CSS ：

div{ 
    position:absolute; 
    height:100px; 
    width: 100px; 
    border: 2px solid #CCCCCC; 
    float:left; 
    top:0px; 
    /*display:inline-block;*/ 
} 

.right{ 
    position:absolute; 
    background-color:Yellow; 

} 
.left{ 
    background-color:Red; 
     top:120px; 
} 
.row-span{ 
    height:200px; 
} 
.col-span{ 
    width:200px; 
} 
.row{ 
    border:none; 
    width:220px; 

} 

.middle{ 
    top:120px; 
    left:120px; 
}

來源

2013-03-18 irfan Munir

AFAIK，你想要的佈局（也是響應）不能用css來完成。您可能能夠在使用CSS列的現代瀏覽器上獲得佈局，但不支持IE9或更低版本，並且不符合您的要求（請查看link）。

另一種方法是像jQuery masonary或isotope一個JavaScript庫，讓用於佈局奇形物品和響應。

來源

2013-03-18 14:12:00 hajpoj

將基於表格佈局的列跨距轉換爲自舉響應式設計

回答

相關問題