隐藏不适合容器高度的块 [英] Hide block which does not fit container height

问题描述

我有这个例子 http://jsfiddle.net/brain2xml/cVAMN/

I have example here http://jsfiddle.net/brain2xml/cVAMN/

<div id="container">
<div class="sep">1</div>
<div class="sep">2</div>
<div class="sep">3</div>
<div class="sep">4</div>
<div class="sep">5</div>
</div>

和css

.sep{
    border:1px solid red;
    height: 50px;
    width: 280px;
    margin: 10px;
}
#container{
    height: 170px;
    width: 300px;
    border:1px solid green;
}

我想要在容器内的块（块3,4和5）它们不是整个容器内部。如果我把overflow属性放到容器，块＃3的一半仍然可见。但我想要显示块，如果他们在容器中可见。

I want blocks (block 3, 4 and 5) inside container been hide if they not whole inside container. If I put overflow property to container, the half of block #3 still visible. But I want show blocks if they whole visible in container.

是否可以不使用js？

推荐答案

CSS可以实现。

演示

.sep{
    border:1px solid red;
    height: 50px;
    width: 280px;
    margin: 10px;
}
#container{
    min-height: 170px;
    width: 300px;
    border:1px solid green;
    padding:10px;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

这篇关于隐藏不适合容器高度的块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！