css怎样实现DIV高度自适应

互联网 20-8-12

可以添加表格特性。

(推荐教程: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高度自适应的详细内容,更多内容请关注技术你好其它相关文章!

来源链接:
免责声明:
1.资讯内容不构成投资建议,投资者应独立决策并自行承担风险
2.本文版权归属原作所有,仅代表作者本人观点,不代表本站的观点或立场
标签: div
上一篇:php获取远程图片并下载保存到本地的方法分析 下一篇:css如何设置透明度不会影响子元素

相关资讯