专栏首页WebDeveloper这种div高度自适应确定你知道吗?

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

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;
    display: 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 条评论
登录 后参与评论

相关文章

  • 移动端滑动切换

    _simple
  • css的高级用法

    _simple
  • 实现HTML元素垂直居中的六种方法

    _simple
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • 老雷PHP全栈开发教程之Vue基础教程

    Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,Vue通过数据驱动构建ui界面。

    老雷PHP全栈开发
  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study
  • HTML规范 - 整体结构

    申霖

扫码关注云+社区

领取腾讯云代金券