Jquery 使12个项目中的8个项目在视口中可见，4个项目处于溢出状态

我的HTML结构如下：

<div class="container1">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    ... etc
</div>

jsiddle:

第一种解决方案（具有固定高度）： 若你们用100%除以itemsCount，你们将得到一个项目的宽度。设置溢出：隐藏你可以走了。但是，请注意，这仅适用于固定高度的项目，该项目必须与容器的高度相同

var container1        = $( '#container1' );
var items             = $( '.item', container1 );
var itemsInContainer1 = 8;
var itemWidth         = container1.width() / itemsInContainer1;

items.width( itemWidth );

container1.width( itemWidth * items.size() );

CSS:

JS（jQuery）：

JSFIDDLE：

第二种解决方案（无固定高度） 您只需以编程方式隐藏任何溢出元素

var container1        = $( '#container1' );
var items             = $( '.item', container1 );
var itemsInContainer1 = 8;

items.width( ( 100 / itemsInContainer1 ) + '%' );

items.each( function( index, element )
{
    if ( index >= itemsInContainer1 )
    {
        $( element ).hide();
    }
});

代码基本相同，但是现在，您可以删除height属性

JSFIDDLE：

第三种解决方案 如果要显示所有元素，即使是“溢出”的元素，也必须扩展容器的宽度。首先，将实际的

#container1

宽度（假设为100%宽度）除以“可见项目”的数量，得到一个项目的宽度。然后将这个数字乘以容器中的物品数量

var container1        = $( '#container1' );
var items             = $( '.item', container1 );
var itemsInContainer1 = 8;
var itemWidth         = container1.width() / itemsInContainer1;

items.width( itemWidth );

container1.width( itemWidth * items.size() );

JSFIDDLE：

第四种解决方案（基于百分比） 此解决方案使用百分比而不是像素作为响应度

您必须将每个项目的宽度设置为100%/visibleItemsCount。每个项目都有

位置：绝对。最后一步是通过编程将其
left
属性设置为
itemWidth*countOfItemsOnLeft

CSS:

JS:

JSFIDDLE:
嘿，杰格斯！感谢您的贡献-请查看您的示例！我看到一个问题-我需要溢出的项目保持可见性，并保持左侧浮动，而不会在新行上出现故障-我认为这是可能的，需要根据项目总数调整容器的宽度必须详细说明-*我需要将所有浮动的项目保持在一行上（甚至溢出的项目），就像他们的一条长腰带一样——这就是为什么这是一个挑战——至少对我来说：）我添加了第三个解决方案：）杰格斯！完美：）我在这里添加了一个包装器，它很好：-问题是它现在是像素，而我需要用百分比定义/计算它-有没有简单的方法可以做到这一点？是的，你可以用百分比，使用绝对定位，但这不是最漂亮的方法。你真的需要按百分比计算吗？若有，原因为何？
var container1        = $( '#container1' );
var items             = $( '.item', container1 );
var itemsInContainer1 = 8;

items.width( ( 100 / itemsInContainer1 ) + '%' );

items.each( function( index, element )
{
    if ( index >= itemsInContainer1 )
    {
        $( element ).hide();
    }
});

var container1        = $( '#container1' );
var items             = $( '.item', container1 );
var itemsInContainer1 = 8;
var itemWidth         = container1.width() / itemsInContainer1;

items.width( itemWidth );

container1.width( itemWidth * items.size() );

#container1 {
    position: relative;
    height: 100px;
}

.item {
    position: absolute;
    top:0;
}

var container1        = $( '#container1' );
var items             = $( '.item', container1 );
var itemsInContainer1 = 8;
var itemWidth         = container1.width() / itemsInContainer1;

items.css( 'width', 100 / itemsInContainer1 + '%' );

items.each( function( index, element )
{
    var percentage = 100 / itemsInContainer1;
    
    $( element ).css( 'left', index * percentage + '%' );   
});