我正在寻找一种纯 CSS 方法来隐藏已部分溢出其容器的 div 3。请参阅附图。
这是一个可行的解决方案，它将完全隐藏不适合其父级固定高度的项目：Codepen https://codepen.io/PhilippeVay/pen/JyBQOy?editors=0100
它以一种棘手的方式使用多列布局：pseudos 和overflow: hidden作为最后的润色。在 Fx、Chrome、Edge 和 IE11 上可以（如果您不像我那样使用自定义属性来更好地理解。预处理器变量就可以了）
-
.container有固定的高度，否则这个问题就没有意义
- Same
.container是预期的两倍。它有 2 列，没有间隙/天沟
- 它：伪
:after存在（半透明的番茄斑点），因此被视为在此 2 列布局中要考虑的第四项。它的高度是 100% => 如果第一列没有足够的空间，它会使第三个项目占据第二列（第二个示例）
- Parent
.mask有我们想要的宽度（一半.container) and overflow: hidden：第 2 列.container被剪裁。您可以删除后一个声明以查看它剪辑的内容
- …
- Profit!
:root {
--w: 40rem;
--p-horiz: 1rem;
box-sizing: border-box;
font-size: 62.5%;
}
* {
box-sizing: inherit;
}
.mask {
width: calc(var(--w));
overflow: hidden; /* REMOVE to see the trick */
/*padding: 0 1rem; NOPE */
padding: 1rem 0;
background-color: #aaa;
/*outline: 1px dashed red;*/
}
.container {
position: relative;
display: column;
column-count: 2;
column-gap: 0;
width: calc(var(--w) * 2);
/*max-*/height: 25rem; /* max-height also work, at least on Fx */
font-size: 1.6rem;
}
.container:after {
content: '';
display: block;
height: 100%;
background-color: #FF634780;
}
.container:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 50%;
height: 100%;
background-color: #aaa;
}
/* 1. Sufficient for Fx */
/* 2. Needed for Chrome */
[class^="item-"] {
overflow: hidden; /* 1. */
display: inline-block; /* 2. */
width: calc(100% - 2 * var(--p-horiz)); /* 2. */
margin-left: var(--p-horiz);
text-align: center;
background-color: #ddd;
/*outline: 1px dashed blue;*/
}
.item-1 {
height: 8rem;
}
.item-2 {
height: 4rem;
}
.item-3 {
height: 8rem;
background-color: lightblue;
}
.alt .item-3 {
height: 16rem;
}
.mask:first-child {
margin-bottom: 3rem;
}
[class^="item-"]:not(:first-child) {
margin-top: 1rem;
}
<div class="mask">
<div class="container">
<div class="item-1">Block 1</div>
<div class="item-2">Block 2</div>
<div class="item-3">Block 3</div>
</div>
</div>
<div class="mask">
<div class="container alt">
<div class="item-1">Block 1</div>
<div class="item-2">Block 2</div>
<div class="item-3">Block 3</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
