Question

我有一行中的盒子，我想要它，所以当添加一个新的时，它会将其他的移动到右边并且适合放在左边，如果这些框溢出你的屏幕，它们就会被隐藏。我希望能够继续追踪，所以它需要我知道我可以摆弄绝对位置和jquery - 使用隐藏输入与盒数，计算屏幕宽度和定义左或右位置，但说实话我更愿意不是：我确定有一种方法可以解决溢出问题但我无法得到任何工作。我愿意添加divs / 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

您可以点击＆＃34;点击我＆＃34;添加任意数量的盒子。

Another fiddle with margin and min-width

如何让这些框在jquery或css中对齐

3 个答案: