想象一下,您有一个元素的高度是浏览器窗口高度的百分比。该元素包含一堆块元素。
有没有办法使用类似的东西overflow: hidden
但要确保最后一个块元素在溢出时完全隐藏而不是部分隐藏?
(使用 JavaScript 很容易做到这一点,但我更喜欢使用样式表来解决这个问题。)
2013年还不可能,但现在所有IE
基本思想是将弹性项目包裹在可见区域之外。
Remove overflow: hidden;
查看物品的去向。
$('.parent').ready(function() {
$('.parent').resizable();
})
* {
box-sizing: border-box;
}
.parent {
height:288px;
width: 233px;
border: 5px dashed blue;
background: yellow;
display: flex;
flex-flow: column wrap;
overflow: hidden;
}
.child {
height: 100px;
width: 100%;
border: 5px solid brown;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="parent">
<div class="child">0</div>
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)