动态网格CSS

Question

如何获得一个如下所示的动态网格？ ：

我无法弄清楚如何正确构造的CSS来实现这一目标。目前，这是我的网是什么样子：

这里有一个小提琴，我一直在试图解决这个问题：

http://jsfiddle.net/qqeo9ety/2/

---

这里是我当前的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; 
} 

非常感谢大家想法！

Answer 1

这里有一个办法做到这一点，同时保持语义顺序：

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; 
} 

Answer 2

这样的事情呢？

<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; 
} 

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

Answer 3

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()