试图用jQuery创建一个简单的网格

Question

我已经尝试为此制作一个JSfiddle，但这是一个痛苦因为一切都是动态的。希望没有它我会得到一些指示。

我试图将一些div放在一个简单的网格

中

使用此代码：

    var buttonHeight = 200;
    var buttonWidth = 220;
    var buttonGap = 10;
    var titleHeight = 100;

    //set the secetion width
    var sectionChildren = section.childSections > 0 
        ? section.childSections.length  + section.guideScenes.length
        : section.guideScenes.length;

    var rows = Math.ceil( ($( "#guide" ).height() - titleHeight) / buttonHeight);
    var columns = Math.ceil(sectionChildren/rows);

    console.log(rows);
    console.log(columns);

    $( "#" + section.id ).width( columns * (buttonWidth + buttonGap) );

    //set the guide width
    $( "#guide" ).width( $( "#" + section.id ).width() + $( "#guide" ).width() );

它试图组织网格并设置容器的宽度（#guide），它具有固定的高度。

即使数学似乎是正确的，并且有2行和4列，最后一个div总是进入一个新行而不是最后一列。

这是父div（部分）的CSS

.section
{
    height:             80%;
    cursor:             pointer;
    float:              left;
    position:           relative;
    padding-right:      50px;
    z-index:            3; 
}

和块（guideScene）

.guideScene
{
    height :            200px;
    width :             220px;
    background-size:    cover; 
    background-repeat:  no-repeat;
    background-position: center;
    position:           relative;
    overflow:           hidden;
    display:            inline-block;
    margin:             10px 10px 10px 10px;

}

任何想法如何将最后一个单元格放到最左边的列中。

Answer 1

如果你想在网格中创建div，只需使用CSS来获得所需的结果。您只需要使用此代码

<div class="container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
</div>

在CSS中

.grid-item { display:inline-block; background:#ccc; margin:10px; padding:10px; }

它将推送块形成网格，好东西是最后一个单元格将在左边，这个代码不需要JavaScript，所以更快的页面加载。

Answer 2

问题是填充，但我更喜欢使用box-sizing：border-box;因为这将包括边框和填充，因此您不必手动添加填充和边框的宽度或高度，因为它随后包含在框模型中。

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

不够宽。需要为填充添加一些额外的宽度。