css怎样实现DIV高度自适应
程序员文章站
2022-03-06 21:01:11
...
可以添加表格特性。
(推荐教程:CSS教程)
父级元素添加属性 display: table;
子一级元素添加属性 display: table-cell;
代码:
<div class="div-row"> <style type="text/css"> .div-row { width: 400px; border: 1px solid #23527C; display: table; } .div-col { display: table-cell; } </style> <div class="div-col" style="background-color: #28A4C9;"> <p><span>内容1</span></p> </div> <div class="div-col" style="background-color: #31B0D5;"> <p><span>内容1</span></p> <p><span>内容2</span></p> </div> <div class="div-col" style="background-color: #269ABC;"> <p><span>内容1</span></p> <p><span>内容2</span></p> <p><span>内容3</span></p> </div> <div class="div-col" style="background-color: #5BC0DE;"> <p><span>内容1</span></p> <p><span>内容2</span></p> <p><span>内容3</span></p> <p><span>内容4</span></p> <p><span>...</span></p> </div> </div>
结果:
以上就是css怎样实现DIV高度自适应的详细内容,更多请关注其它相关文章!
上一篇: css怎么样实现图片圆角
下一篇: css超链接字体颜色如何改变
推荐阅读
-
如何让整个div实现超链接(得用标签)_html/css_WEB-ITnose
-
JS实现DIV高度自适应窗口示例
-
css中position:fixed实现div居中_html/css_WEB-ITnose
-
子div高度适应固定父div_html/css_WEB-ITnose
-
实现一个三列布局(左右侧固定,中间自适应宽度)_html/css_WEB-ITnose
-
CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose
-
div2 在 div3中, 希望div2的高度填满div3_html/css_WEB-ITnose
-
跨域下iframe自适应高度_html/css_WEB-ITnose
-
CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码_html/css_WEB-ITnose
-
DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose