試圖用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（部分）

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

CSS和塊（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

不夠寬。需要爲填充添加一些額外的寬度。

Answer 3

問題是填充，但我更喜歡使用框大小：邊框;因爲這將包括邊框和填充，所以您不必手動添加寬度或高度填充和邊框，因爲它隨後包含在框模型中。

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