Bir konteynerin sağında boş alanlardan nasıl kurtulacaksınız?

Question

Ben gibi bir konteynerin içinde itens yüzen kullanılırken:

Kanunu (http://jsfiddle.net/tombrito/gx7kL330/7/): Ben penceresini yeniden boyutlandırmak eğer

.container { 
 
    background: blue; 
 
    position: absolute; 
 
    width: auto; 
 
} 
 
.floating-box { 
 
    float: left; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 10px; 
 
    border: 3px solid #73AD21; 
 
}

<div class="container"> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
</div>

..., görüyorum kapsayıcının width: auto içeriği tam olarak geniş değil:

Sağda boş alan var. Yeniden boyutlandırdığımda bile, kapsayıcıyı gerçekten yüzen çocukların genişliği haline getirmenin bir yolu var mı?

Answer 1

Flexbox kurallarını kullanabilirsiniz. (source)

html:

<ul class="flex-container"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    <li class="flex-item">6</li> 
</ul> 

css:

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

.flex-item { 
    background: red; 
    padding: 5px; 
    width: 200px; 
    height: 150px; 
    margin-top: 10px; 
    line-height: 150px; 
} 

Answer 2

jQuery bir seçenek ise, böyle bir şey yapacağını;

$('body').on('resize', function() { 
    var width = document.documentElement.clientWidth || window.innerWidth, 
     itemWidth = 150 + 20 + 6; //width + margin + border, 
     count = Math.floor(width/itemWidth), 
     containerWidth = itemWidth * count; 

    $('.container').css('width', containerWidth + 'px'); 
});