这种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 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

[桌面版] 在 Mockplus 2.1 (预览版)中使用图片轮播

1、创建移动项目 2、从交互分类中添加一个图片轮播组件 3、点击图片轮播组件上小工具条上的图片选择按钮 4、选择一张或多张图片。(这里只会把对话框中勾选...

5458
来自专栏用户画像

H5新增的嵌入多媒体元素与交互性元素

新增的嵌入多媒体元素有video和audio元素,分别用来插入视频和声音的。值得注意的是可以再开始标签和结束标签之间放置文本内容,这样旧版本的浏览器就可以显示出...

742
来自专栏林德熙的博客

win10 uwp 使用 LayoutTransformer

如果需要使用旋转,那么很容易把图片旋转的布局被裁剪。如果需要旋转的控件还在指定的 Grid 内,就需要使用布局的旋转。本文告诉大家如何使用 LayoutTran...

1102
来自专栏十月梦想

css的position定位详解

iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

803
来自专栏前端小叙

多行或者单行文本超出两行显示点点点,如果保证内容始终垂直居中?

我现在的需求是这样的,我目前实现了一个div框,显示文字,超出两行显示...,如果单行要保证垂直居中,我如果给容器使用display:flex;align-it...

1343
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

19010
来自专栏互联网软件技术

图片懒加载

插件地址:https://github.com/tuupola/jquery_lazyload/tree/2.x

2593
来自专栏分享达人秀

屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组...

2036
来自专栏菜鸟前端工程师

html+css学习笔记006-伪类

1282
来自专栏DannyHoo的专栏

单元格的点击问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1281

扫码关注云+社区

领取腾讯云代金券