0

我有一个固定大小的容器，其中包含不同高度的块的垂直列表。我想隐藏所有不完全适合容器的块。

所以假设是这样的：

#container{
    height: 150px;
    width: 220px;
    border:1px solid green;
    padding:10px;
    overflow: hidden;
}

.inner{
    border:1px solid blue;
    height: 50px;
    width: 200px;
    margin: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;
}

<div id="container" >
    <div class="inner">A</div>
    <div class="inner">B</div>
    <div class="inner">C</div>
    <div class="inner">D</div>
</div>

（见：http: //jsfiddle.net/TSCzS/）

我得到这样的东西：

+-------------+
|             |
|  +-------+  |
|  | A     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | B     |  |
|  +-------+  |
|             |
|  +-------+  |
+--| C     |--+
   +-------+  

   +-------+  
   | D     |  
   +-------+

我不想只剪掉 C 块：（就像在容器上简单地使用溢出：隐藏一样）

+-------------+
|             |
|  +-------+  |
|  | A     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | B     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | C     |  |
+-------------+

但是，块 C 和 D 应该像这样隐藏：

+-------------+
|             |
|  +-------+  |
|  | A     |  |
|  +-------+  |
|             |
|  +-------+  |
|  | B     |  |
|  +-------+  |
|             |
|             |
+-------------+

我怎样才能做到这一点？

我的应用是我有一个显示“最新消息”的全屏浏览器窗口（在数字标牌应用程序中）。这些单元没有输入设备，因此无法滚动。

一个类似的问题，但没有一个可行的解决方案： 隐藏不适合容器高度的块

谢谢。

4

1 回答 1

1

我能想到的唯一解决方案是通过 JavaScript。CSS 本身无济于事。

这是您的小提琴的更新：http: //jsfiddle.net/bukfixart/TSCzS/1/

此片段选择所有剪辑元素并隐藏它们。

$('.inner', '#container').filter(function() {
    return $('#container').offset().top + $('#container').height() < $(this).offset().top + $(this).height();
}).hide();

对于此解决方案，您需要使用 jQuery

编辑：

对于所有纯 CSS 爱好者 ;-)

http://jsfiddle.net/bukfixart/CfMer/

我尝试了一个没有 javascript 的解决方案，而是使用了 css3 转换。因此，一些标记更改是必要的

<div id="outercontainer" >
    <div id="container" >
        <div class="outer">
            <div class="inner">A</div>
        </div>
        <div class="outer">
            <div class="inner">B</div>
        </div>
        <div class="outer">
            <div class="inner">C</div>
        </div>
        <div class="outer">
            <div class="inner">D</div>
        </div>
        <div style="clear:left;"></div>
    </div>
</div>

这是有点奇怪的风格代码

#outercontainer {
    width:240px;  /* container width + padding */
    height:170px; /* container height + padding */
    border:1px solid green;
}    

#container{
    height: 220px;  /* container width ^^ */
    width: 150px;   /* container height ^^ */
    padding:10px;
    overflow: hidden;

    position:relative;
    left:35px;    /* half of difference from width + padding to outer container width */
    top:-35px;      /* half of difference from height + padding to outer container height */

    -webkit-transform:rotate(90deg);
}

.outer{
    float:left;

    height:202px;  /* width of the inner box + border */
    width:52px;    /* height of the inner box + border */
    margin:10px 10px 10px 0px;
    line-height:200px; /* width of the inner box */

    vertical-align:middle;
    -webkit-transform:rotate(-90deg);
}

.inner{
    border:1px solid blue;
    height: 50px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    line-height: 50px;

    display:inline-block;
    position: relative;
    left: -75px;   /* half of difference between width and height */
}
于 2013-11-03T20:14:38.410 回答