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

潇洒哥和黑大帅

发布于 2018-10-23 16:22:54

7790

发布于 2018-10-23 16:22:54

文章被收录于专栏：WebDeveloper

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

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

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>

.parent{
    overflow:hidden;
}

.parent:after{
    content: " ";
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}

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

<body>
    <div class="main"></div>
</body>

.main:after{
    display: block;
    content: ' ';
    padding-top: 50%;
    border: 1px solid black;/*便于看出div的效果*/
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016.06.01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度