×
新网 > 建站推广 > 正文

css怎样实现DIV高度自适应

  • 作者:zccc
  • 来源:网络
  • 2020-08-12 18:02:57

可以添加表格特性。(推荐教程:CSS教程)父级元素添加属性 display: table;子一级元素添加属性 display: table-cell;代码:<div class="div-row"> <style type="text/css

可以添加表格特性。

(推荐教程: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>

结果:

  • 相关专题

免责声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,也不承认相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,请发送邮件至:operations@xinnet.com进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

免费咨询获取折扣

Loading