如何解决CSS Grid 中的 Float 和 min-height 伪元素导致溢出
我正在制作一个产品横幅,文字围绕着剪下的图像和页脚中的徽标流动。
主要问题
当 min-height
属性添加到 .panel-body:before
时,<p>
内容停止扩展其父级 .panel-body
并溢出 .panel-footer
并溢出 {{ 1}}。为什么?
.panel
html {
font-size: 16px;
}
body {
padding-top: 2rem;
font: 1rem/1.5 sans-serif;
}
.svg-clip {
position: absolute;
width: 0;
height: 0;
}
.panel-banner {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows: 1fr auto;
grid-gap: 0;
color: #fff;
background-color: #666;
}
.panel-banner .panel-heading {
grid-column: 7 / 13;
grid-row: 1 / 3;
padding: 0;
background-image: url(https://picsum.photos/720/1024?random=4);
clip-path: url(#image-clip-path);
}
.panel-banner .panel-body {
grid-column: 1 / 13;
grid-row: 1;
z-index: 10;
padding: 1.5rem;
}
.panel-banner .panel-body p {
margin: 0 0 1.5rem 0;
font-size: 2.5rem;
}
.panel-banner .panel-body::before {
content: "";
display: block;
float: right;
min-width: 50%;
min-height: 100%;
shape-outside: polygon(2% 0%,49% 70%,51% 85%,42% 100%,100% 100%,100% 0%,2% 0%);
}
.panel-banner .panel-footer {
grid-column: 1 / 7;
grid-row: 2;
padding: 1.5rem;
border-top: none;
background-color: transparent;
}
https://jsfiddle.net/oinkquack/p2x4yo8d/2/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。