如何讓這些框對齊jquery或css

Question

我有一個框在一行，我想它，所以當一個新的附加，它將其他人向右移動，適合在左邊，和如果這些框溢出你的屏幕，他們只是隱藏。我想能夠繼續追加，所以它需要我知道我可以擺弄絕對位置和jquery - 使用隱藏的輸入框計數，計算屏幕寬度和定義左或右位置，但說實話我寧願不是的：我確信有一種方法可以處理溢出，但我無法獲得任何工作。我願意加入的div/CSS等許多感謝，

HTML：

<div id="boxWrap"> 
    <div id="innerWrap"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    </div> 
</div> 

的jQuery：

$(function() { 

    var html = '<div class="box"></div>'; 
    $('#boxWrap').append(html); 

}); 

CSS：

.box { 
    width: 100px; 
    height: 100px; 
    background-color: #333333; 
    margin: 5px; 
    display: inline-block; 
    position: relative; 
} 
#boxWrap { 
    width: 100%; 
    overflow-y: visible; 
    height: 20px; 

} 
#innerWrap { 
    overflow-x: hidden; 
    max-width: 100%; 
} 

編輯：

<button>Append</button> 
<div id="boxWrap"> 
    <div id="innerWrap"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div> 
</div> 
<input id="count" value=0></input> 




$('button').click(function(){ 

    var html = '<div class="box"></div>'; 
    $inWrap = $('#innerWrap'); 
    $inWrap.prepend(html); 
    $lastBox = $inWrap.find('.box'); 

    var count = parseInt($('#count').val(), 10); 
    count = count+1; 

    $('#count').val(count.toString()); 
    var limit = $inWrap.width()/110; 
    if(110*count >= $inWrap.width()) { 
     $lastBox.index(count-1).css({"display": "none" } ); 
    } 

}); 

Answer 1

如果你想的箱子被添加到（前）在他人的左邊，你會想用prepend()，你還需要調用它在盒子的父母身上。您可以通過改變white-space CSS屬性保持在同一直線上的箱子：

jQuery的

var html = '<div class="box"></div>'; 
$('#innerWrap').prepend(html); 

CSS

#innerWrap { 
    white-space:nowrap; 
    overflow-x: hidden; 
    max-width: 100%; 
} 

JSFiddle

我不知道我完全明白了這個問題，但這是我的想法你正在尋找。

Answer 2

使用float:right

.box { 
    width: 100px; 
    height: 100px; 
    background-color: #333333; 
    margin: 5px; 
    display: inline-block; 
    position: relative; 
    float:right; 
} 

DEMO

Answer 3

您可以通過使用display table/table-cell來實現此功能，該功能非常適合用隨機數字的小孩填充容器而不會溢出。

.box { 
    background-color: #333333; 
    display: table-cell; 
    color:white; 
    text-align:center; 
} 
#boxWrap { 
    width: 100%; 

} 
#innerWrap { 
    width:100%; 
    display:table; 
} 

Here is a fiddle to explain

您可以點擊 「點擊我」 添加任何數量的框。

Another fiddle with margin and min-width