捕捉容器寬度與可見縮略圖數量的寬度？

Question

看到我的網站在這裏：http://www.element17.com。爲了獲得更多縮略圖，可能需要更改爲默認的不同專輯。 Paris專輯中的圖片數量最多。

如果您單擊右下角的「顯示照片網格」按鈕，您會看到我設計的照片/縮略圖網格。

現在它與視口成比例，我希望它繼續這樣做，但不是視圖的大小順利增加，而是希望它只與縮略圖的數量一樣寬目前適合在視口中，以便在顯示的縮略圖數量的右側沒有空的空格。我希望它在視口右側保持20px，左側顯示任何空白空間。

這是如何實現的？

當前的代碼如下：

HTML

<div id="grid_outer"> 
    <div id="grid_inner"> 
    <div class="grid_thumb button"> 
     <span class="thumb_title">TITLE</span> 
     <img class="thumb_image" src="image.jpg" alt="TITLE"> 
    </div> 
    <div class="grid_thumb button"> 
     <span class="thumb_title">TITLE2</span> 
     <img class="thumb_image" src="image2.jpg" alt="TITLE2"> 
    </div> 
    </div> 
</div> 

CSS

#grid_outer {display:none; position:absolute; background-color:rgba(0,0,0,0.75); right:20px; left:20px; bottom:60px; padding:20px 10px 10px 20px; border-radius:20px; max-height:480px; overflow:hidden;} 
.grid_thumb {position:relative; float:left; margin:0 10px 10px 0; width:150px; height:150px;} 
.thumb_image {position:absolute; top:0; left:0; border-radius:5px;} 
.thumb_title {position:absolute; bottom:0px; left:0px; z-index:100; padding:8px; background:#000; border-radius:0 5px 0 5px;} 
.button {cursor:pointer;} 

所以我發現，如果我的#grid_outer設置寬度爲auto，它將表現我想要的如果有不到一行星期四mbnails，但如果有多行項目，則會延伸到視口的最左側。誰能幫忙？

Answer 1

CSS的唯一的解決方案（http://caniuse.com/#feat=css-sel3，http://caniuse.com/#feat=css-mediaqueries）

http://jsfiddle.net/coma/G7bx8/6/embedded/result/

div.grid { 
    font-size: 170px; 
    position: fixed; 
    max-width: 1em; 
    height: 3em; 
    bottom: 20px; 
    right: 20px; 
    padding: 5px; 
    background-color: rgba(0, 0, 0, .75); 
    border-radius: 20px; 
    overflow: auto; 
} 

div.grid:after { 
    display: block; 
    content: ""; 
    clear: both; 
} 

div.grid > div { 
    width: 160px; 
    height: 160px; 
    float: left; 
    margin: 5px; 
    border-radius: 10px; 
    background-color: #009dff; 
} 

@media screen and (min-width: 410px) { 
    div.grid { 
     max-width: 2em; 
    } 

    div.grid > nth-child(2n) { 
     clear: right; 
    } 
} 

@media screen and (min-width: 550px) { 
    div.grid { 
     max-width: 3em; 
    } 

    div.grid > nth-child(3n) { 
     clear: right; 
    } 
} 

@media screen and (min-width: 720px) { 
    div.grid { 
     max-width: 4em; 
    } 

    div.grid > nth-child(4n) { 
     clear: right; 
    } 
} 

@media screen and (min-width: 890px) { 
    div.grid { 
     max-width: 5em; 
    } 

    div.grid > nth-child(5n) { 
     clear: right; 
    } 
} 

@media screen and (min-width: 1060px) { 
    div.grid { 
     max-width: 6em; 
    } 

    div.grid > nth-child(6n) { 
     clear: right; 
    } 
} 

@media screen and (min-width: 1230px) { 
    div.grid { 
     max-width: 7em; 
    } 

    div.grid > nth-child(7n) { 
     clear: right; 
    } 
} 

@media screen and (min-width: 1400px) { 
    div.grid { 
     max-width: 8em; 
    } 

    div.grid > nth-child(8n) { 
     clear: right; 
    } 
} 

@media screen and (min-width: 1570px) { 
    div.grid { 
     max-width: 9em; 
    } 

    div.grid > nth-child(9n) { 
     clear: right; 
    } 
} 

@media screen and (min-width: 1740px) { 
    div.grid { 
     max-width: 10em; 
    } 

    div.grid > nth-child(10n) { 
     clear: right; 
    } 
} 

jQuery的溶液

http://jsfiddle.net/coma/G7bx8/7/embedded/result/

var size = 170; 
var margin = 40; 
var win = $(window); 
var adjust = function() { 

    $('div.grid').each(function() { 

     var width = win.width() - margin; 
     width = Math.floor(width/size) * size; 

     $(this).width(width); 
    }); 
}; 

win.resize(adjust); 
adjust();