关闭

这种div高度自适应确定你知道吗?

标签: htmlweb前端div高度自适应after伪元素
212人阅读 评论(0) 收藏 举报
分类:

# 1. 随子元素div高度自适应

如何下面的child1和child2浮动,parent高度就会为0,前提child1和child2都有高度,如果你想parent的高度自适应,请继续阅读

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
  • 样式省略

方法1

.parent{
    overflow:hidden;
}

方法2

  • 会使用到伪元素:after,如果不懂请看伪元素
.parent:after{
    content: " ";
    height: 0;
    diplay: block;
    clear: both;
    visibility: hidden;
}

2. 根据div宽度的百分比调整div高度

假设我的div宽度会自动变化,但是我的高度只想色湖之成div宽度的一半,该如何实现呢?

<body>
    <div class="main"></div>
</body>
  • 设置main的高度为宽度的一半
.main:after{
    display: block;
    content: ' ';
    padding-top: 50%;
    border: 1px solid black;/*便于看出div的效果*/
}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6578次
    • 积分:239
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类