内容溢出和元素水平居中和垂直居中的方框大小设置 - html - php中文网博客
最编程
2024-06-30 06:58:21
...
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>容器最小高度与最大高度</title> <style> body div { border: 1px solid red; width: 25em; } body div:first-of-type { /* 内容由高度撑开 */ height: auto; } body div:nth-of-type(2) { min-height: 5em; /* 只设置最小高度，内容超出后自动撑开，内容不足时按最小高度显示，不塌陷 */ } body div:nth-of-type(3) { max-height: 10em; /* 最大高度，内容超出最大高度时隐藏或加滚动条显示， 内容没有超出最大高度时，按内容高度显示 */ background-color: turquoise; overflow: auto; } </style> </head> <body> <div>2020年十大房价下跌城市：北京、郑州、青岛上榜</div> <div>2020年十大房价下跌城市：北京、郑州、青岛上榜<br /></div> <div> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> 2020年十大房价下跌城市：北京、郑州、青岛上榜<br /> </div> </body></html>