如何切断元素的一部分，但是在DOM中保留它？

This is my goal:

这是我的目标:

The arrows cycle through the boxes by sliding them left and right - but the Javascript solution for this is beyond the scope of this question.

箭头通过向左和向右滑动循环框 - 但Javascript解决方案超出了这个问题的范围。

This is what I currently have:

这就是我目前拥有的:

As you see, the 6th box naturally floats over into the new line. What I need is to display whatever part of it can fit to the right of the 5th box. Presumably there should be some way to allow the container div (#toplist-saved) to have more width than its parent (#toplist-inner), and then hiding the overflow on its parent should do the trick. I could resolve this by setting the container width to some fixed huge width like 1000%, instead I'd like it to have only the minimal width required to hold the boxes without floating them over into a new line. Is this possible? This is the current HTML:

如你所见,第6个盒子自然地漂浮在新线上。我需要的是显示它适合第5个盒子右边的任何部分。假设应该有一些方法允许容器div(#toplist-saved)具有比其父级(#toplist-inner)更多的宽度,然后将溢出隐藏在其父级上应该可以解决问题。我可以通过将容器宽度设置为一些固定的巨大宽度(如1000%)来解决这个问题,相反,我希望它只需要保持盒子所需的最小宽度而不会将它们浮动到一个新行中。这可能吗?这是当前的HTML:

<div id="toplist">
    <div style="display: block;" id="toplist-inner">
        <div style="display: block;" id="toplist-saved">
            <h5>Saved Reports:</h5> 
            <div class="toplist-box">
                <div class="toplist-box-inner">
                    <div class="toplist-box-title">
                        <img src="img/desktop_grey.jpg"> Sample Report #1
                    </div>
                    <i class="fa fa-cog toplist-box-settings"></i>
                    <i class="fa fa-trash toplist-box-delete"></i>
                </div>
            </div>
            <div class="toplist-box">
                <div class="toplist-box-inner">
                    <div class="toplist-box-title">
                        <img src="img/desktop_grey.jpg"> Sample Report #2
                    </div>
                    <i class="fa fa-cog toplist-box-settings"></i>
                    <i class="fa fa-trash toplist-box-delete"></i>
                </div>
            </div>
            <div class="toplist-box">
                <div class="toplist-box-inner">
                    <div class="toplist-box-title">
                        <img src="img/desktop_grey.jpg"> Sample Report #3
                    </div>
                    <i class="fa fa-cog toplist-box-settings"></i>
                    <i class="fa fa-trash toplist-box-delete"></i>
                </div>
            </div>
            <div class="toplist-box">
                <div class="toplist-box-inner">
                    <div class="toplist-box-title">
                        <img src="img/desktop_grey.jpg"> Sample Report #4
                    </div>
                    <i class="fa fa-cog toplist-box-settings"></i>
                    <i class="fa fa-trash toplist-box-delete"></i>
                </div>
            </div>
            <div class="toplist-box">
                <div class="toplist-box-inner">
                    <div class="toplist-box-title">
                        <img src="img/desktop_grey.jpg"> Sample Report #5
                    </div>
                    <i class="fa fa-cog toplist-box-settings"></i>
                    <i class="fa fa-trash toplist-box-delete"></i>
                </div>
            </div>
            <div class="toplist-box">
                <div class="toplist-box-inner">
                    <div class="toplist-box-title">
                        <img src="img/desktop_grey.jpg"> Sample Report #6
                    </div>
                    <i class="fa fa-cog toplist-box-settings"></i>
                    <i class="fa fa-trash toplist-box-delete"></i>
                </div>
            </div>
            <div class="splitter"></div>
        </div> 
    </div>
</div> 

And CSS:

#toplist {
    position: relative;
    z-index: 34;
}

#toplist-inner {
    background: #f3f6fb;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    overflow: hidden;
}

#toplist-saved {
    display: none;
    width: 1000%;
}

#toplist-saved h5 {
    color: #0c5f9e;
}

.toplist-box-inner {
    float: left;
    margin: 30px 20px 30px 0;
    position: relative;
    border: 1px solid #757575;
    border-radius: 2px;
    width: 180px;
    height: 60px;
}

.toplist-box-settings {
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
}

.toplist-box-delete {
    position: absolute;
    bottom: 3px;
    right: 3px;
    cursor: pointer;
}

.toplist-box-title {
    color: #757575;
    font-size: 11px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 10px;
    cursor: pointer;
}

.toplist-box-title img {
    margin-right: 5px;
}

2 个解决方案

#1

This is what I would do in your case:

这就是我在你的情况下会做的事情:

Inside the container I would add another container which will hold all your "boxes". Those boxes will have display:inline-block insteed of float, that way you can add to this container white-space:nowrapto avoid the boxes to jump to the next line if no room enough. Then adding overflow:hidden to the container will "hide" any box outside.

在容器内,我会添加另一个容器,它将容纳你所有的“盒子”。那些盒子将有显示:浮动的内联块,这样你可以添加到这个容器white-space:nowrap,以避免盒子跳到下一行,如果没有足够的空间。然后添加溢出:隐藏到容器将“隐藏”外面的任何框。

Finally I will wrap again all the boxes into another container which won't have any css but will make the buttoms work as you will change the margin-left of this container each time you click on the buttoms like this:

最后,我将所有的盒子再次包装到另一个容器中,这个容器没有任何css,但会使buttoms工作,因为每次你点击这样的buttoms时你将改变这个容器的margin-left:

$('.left').on('click', function(){    
    $('.margin-boxes').animate({marginLeft: '-=200px'}, 500);
  })

$('.right').on('click', function(){    
    $('.margin-boxes').animate({marginLeft: '+=200px'}, 500);
  })

You can add the margin to your first box and It may work the same, but I think it's cleaner to add this margin-boxescontainer.

您可以在第一个框中添加边距,它可能会相同,但我认为添加此边框框容器更清晰。

Here is the FIDDLE

这是FIDDLE

Edit: there's a problem though. you should add javascrit way that the margin-leftof the container should never be positive or lower than -600px (-600px in my fiddle example with my boxes and margins) to avoid keep "scrolling" when you already seign your last box. It should not be very difficult to make it. I would do it but I can't stay at computer anymore till tonight.

编辑:虽然有问题。你应该添加javascrit的方式,容器的margin-left永远不应该是正的或低于-600px(在我的小提示示例中使用我的框和边距为-600px),以避免在你已经离开最后一个框时保持“滚动”。制作它应该不是很困难。我会这样做,但我不能再呆在电脑前直到今晚。

#2

I'm not totally sure what you want, but overflow: auto; combined with overflow-x: hidden; lets you get the functionality of overflow: auto; without the scroll bar.

我不完全确定你想要什么,但溢出:自动;结合overflow-x:hidden;让你获得overflow:auto;的功能;没有滚动条。

This way you can move what's visible in the frame using the javascript functions you want, without having the scroll bar visible. I made a jsfiddle of it: https://jsfiddle.net/Lkdbfprq/9/.

这样,您可以使用所需的javascript函数移动框架中可见的内容,而无需显示滚动条。我做了一个jsfiddle:https://jsfiddle.net/Lkdbfprq/9/。