动态网格 CSS答案

【问题标题】：Dynamic Grid CSS动态网格 CSS
【发布时间】：2015-04-11 09:58:31
【问题描述】：

如何实现这样的动态网格？：

我无法弄清楚如何正确构建 css 来实现这一点。目前，这是我的网格的样子：

这是我一直试图解决这个问题的小提琴：

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

非常感谢您的任何想法！

【问题讨论】：

你在用gridster.js吗？
尝试使用Gridster.JS。检查Demo
谢谢@Joker。如果我不想要拖放功能怎么办？
@bluet 谢谢，但我需要能够水平订购物品。客户想在后端订购它们，并且该订单需要反映在前端

标签： html css layout grid

【解决方案1】：

这样的事情怎么样？

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

主要思想是首先将其设置为三列。

【讨论】：

唯一的问题是我需要水平订购它，因为它是动态的并通过后端控制。用户希望能够独立于红色项目对蓝色项目进行排序。
一个div高2个蓝色框，包含上面的3列布局，后面跟着一个跨越整个页面的div来拾取最后一行蓝色？
谢谢，但我不知道用户如何能够在后端订购蓝色项目列表并将该顺序反映在前端，除非语义顺序被保留..我弄错了吗？

【解决方案2】：

这是一种在保留语义顺序的同时做到这一点的方法：

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

【讨论】：

【解决方案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()

【讨论】：