3

我有一个 div 元素，我基本上想变成一个窗口（各种）。基本上，在该 div 元素中的内容超出了“窗口”（div 元素）的视口。这是我要完成的工作的图片：

我想要完成的图像

现在，我尝试创建一个固定大小的 div 元素，并给出它overflow: hidden，然后在其中放置较大的内容。问题是（到目前为止，我只在 chrome 中对此进行了测试），当内部元素之一不再适合100%的溢出区域时，它就会消失。

要知道我的意思，我附上了另一张图片：

正在发生的问题

请注意，右侧的绿松石部分缺失（抱歉，黄色左侧的白色间距，这只是我的一项糟糕的裁剪工作）。

这是一个可以解决的问题而无需做一些骇人听闻的事情（例如扩展“窗口”框的宽度，然后将另一个框绝对定位在右侧部分以隐藏该新区域）？

编辑问题已经得到解答，但这里的小提琴让大家看看我想要完成什么：http: //jsfiddle.net/MRnL6/1/

谢谢！

4

4 回答 4

4

我想我明白你在说什么。我认为您的元素正在下降到下一行，因为它们的父容器没有容纳它们。尝试在窗口内创建一个容器，以包含宽度等于其所有子元素的元素。例如看这个小提琴。

的HTML：

<div id="window">
    <div id="container">
        <div class="elem one"></div>
        <div class="elem two"></div>
        <div class="elem three"></div>
        <div class="elem four"></div>
    </div>
</div>

和CSS：

#window {
    height: 100px;
    overflow: hidden;
    width: 250px;
}
#container {
    width: 400px;
}
.elem {
    height: 100px;
    float: left;
    width: 100px;
}
.one {
    background: #0f0;
}
.two {
    background: #f0f;
}
.three {
    background: #ff0;
}
.four {
    background: #0ff;
}
于 2013-09-20T21:46:34.683 回答
0

如果我了解您希望能够滚动到内容？试试overflow:scroll。

于 2013-09-20T21:43:25.483 回答
0

我认为您正在尝试完成类似的事情。

请参阅：http: //jsfiddle.net/UMJwT/2/

尝试添加中介

div
于 2013-09-20T22:23:19.070 回答
-1

最简单的选择是重新设计内部部分，使它们都适合而不是溢出。

看这个演示

#container{
 width:400px;
 height:100px;
 border:5px solid gray;
 margin:10px;
}
.test{
 display:inline-block;
 width:25%;
 height:100%;
}
于 2013-09-20T21:51:35.743 回答