javascript - 我如何让这些框在 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>

j查询:

$(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

我不确定我是否完全理解了这个问题，但我认为这就是您要找的。