動態網格CSS

如何獲得一個如下所示的動態網格？：動態網格CSS

enter image description here

我無法弄清楚如何正確構造的CSS來實現這一目標。目前，這是我的網是什麼樣子：

enter image description here

這裏有一個小提琴，我一直在試圖解決這個問題：

這裏是我當前的CSS：

blue { 
    width: 40px; 
    height: 40px; 
    margin: 5px; 
    background-color: blue; 
    float:left; 
    display:inline; 
} 

.red { 
    width: 90px; 
    height: 90px; 
    margin: 5px; 
    float:left; 
    background-color: red; 
}

非常感謝大家想法！

來源

2015-02-11 Nick B

您使用' gridster.js'？ – 2015-02-11 05:57:09

嘗試使用[Gridster.JS]（http://gridster.net/）。檢查[Demo]（http://gridster.net/demos/dynamic-grid-width.html） – 2015-02-11 06:04:47

謝謝@Joker。如果我不想要拖放功能，該怎麼辦？ – 2015-02-11 06:09:46

這裏有一個辦法做到這一點，同時保持語義順序：

JSFiddle

<div id="container"> 
<div class="blue">1</div> 
<div class="blue">2</div> 
<div class="red"></div> 
<div class="blue b3">3</div> 
<div class="blue b4">4</div> 
<div class="blue b5">5</div> 
<div class="blue b6">6</div> 
<div class="blue b7">7</div> 
<div class="blue">8</div> 
<div class="blue">9</div> 
<div class="blue">10</div> 
<div class="blue">11</div> 
</div> 

.blue { 
    width: 40px; 
    height: 40px; 
    margin: 5px; 
    background-color: blue; 
    float:left; 
    display:inline; 
} 

.b3, .b6 { 
    float: right; 
} 

.b4, .b7 { 
    clear: both; 
} 

.red { 
    width: 90px; 
    height: 90px; 
    margin: 5px; 
    left: 110px; 
    float:left; 
    position: absolute; 
    background-color: red; 
} 

#container { 
    width: 250px; 
}

來源

2015-02-11 06:42:30

殺手！謝啦 – 2015-02-11 07:06:10

這樣的事情呢？

<div id="container"> 

<div id="c1"> 
<div class="blue"></div> 
<div class="blue"></div> 
<div class="blue"></div> 
<div class="blue"></div> 
<div class="blue"></div> 
<div class="blue"></div> 
</div> 

<div id="c2">  
<div class="red"></div> 
<div class="blue"></div> 
<div class="blue"></div> 
</div> 

<div id="c3"> 
<div class="blue"></div> 
<div class="blue"></div> 
<div class="blue"></div> 
</div> 

</div>

具有以下附加CSS：

#c1, #c2 { 
    width: 100px; 
    float: left; 
}

主要思路是先在三列設置它。

來源

2015-02-11 06:04:41

唯一的問題是我需要它是水平排序的，因爲它是動態的並且通過後端進行控制。用戶希望能夠獨立於紅色項目對藍色項目進行排序。 – 2015-02-11 06:08:31

div 2包含上面3列布局的藍色框，後面跟着一個跨越整個頁面以拾取最後一排藍色的div？ – 2015-02-11 06:12:56

謝謝，但我不知道用戶將如何能夠在後端排序藍色項目的列表，並將該順序反映在前端，除非語義順序被保留。我錯了嗎？ – 2015-02-11 06:16:46

Gridster是一個jQuery插件，允許從跨多列的元素構建直觀的draggable佈局。嘗試使用GridsterJS。現場Demos。

HTML

<div class="gridster"> 
    <ul> 
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li> 
     <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li> 
     <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> 

     <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li> 
     <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li> 

     <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> 
     <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li> 
     <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li> 

     <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li> 
     <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li> 

     <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li> 
     <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li> 
    </ul> 
</div>

腳本

$(function(){ //DOM Ready 

    $(".gridster ul").gridster({ 
     widget_margins: [10, 10], 
     widget_base_dimensions: [140, 140] 
    }); 

});

就是這樣。它開始工作。您所要做的就是根據您的需要設置屬性，以啓用/禁用此功能中的功能。

您可以啓用/禁用拖放使用拖放功能，

// Disables drag and drop 
$(".gridster ul").gridster().data('gridster').disable() 

// Enables drag and drop 
$(".gridster ul").gridster().data('gridster').enable()

來源

2015-02-11 06:29:13

動態網格CSS

回答

相關問題