直接上代码:
很多时候
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 没有高度的div */ .box{ padding: 20px; background: #ccc; position: relative; margin-bottom: 20px; border-radius: 40px; overflow: hidden; } /* 定位在左边的伪类 */ .box:after{ position: absolute; width: 20px; content: ''; top: 0; left: 0; bottom: 0; background: red; } /* 设置top 和 bottom 让高度撑开 */ .box>span{ position: absolute; width: 20px; content: ''; top: 0; right: 0; bottom: 0; background: red; } /* 文字中划线 拓展 margin:auto 0 上下垂直居中 left right设置左右距离, top bottom上下距离一致*/ .box:before{ position: absolute; height: 2px; content: ''; top: 0; left: 50px; bottom: 0; right: 50px; background: red; margin: auto 0; } </style> </head> <body> <div class="box">高度不确定,padding撑开的,还有伪类<span></span></div> <div class="box">高度不确定,padding撑开的,还有伪高度不确定,padding撑开的,还有伪类高度不确定,padding撑开的,还有伪类高度不确定,padding撑开的,还有伪类类</div> </body> </html>
都会遇到 高度不确定的父元素, 子元素又是定位的, 让子元素撑开的时候