本文摘自PHP中文网,作者V,侵删。
可以添加表格特性。
(推荐教程:CSS教程)
父级元素添加属性 display: table;
子一级元素添加属性 display: table-cell;
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | < 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如何剪切元素??clip属性的使用
less.js 输出css怎么查看
css中的浏览器私有化前缀有哪些
css如何使用精灵图
css rotation属性怎么用
html中div标签有什么作用
css怎么去掉a标签的颜色
利用css绘制三角形的6种技巧(分享)
css字符间距怎么设置
css如何让文字有阴影
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎样实现DIV高度自适应