资讯专栏INFORMATION COLUMN

css block多列同高

xumenger / 2500人阅读

摘要:在中如果分别用几个来存放内容,且内容量不同,设置同宽未设同高时,常常出现高度不同样式不美观的问题,可以统一高度来解决,还有一种办法利用和正负值抵消设置父容器设置超出隐藏,这样子父容器的高度就还是它里面的列没有设定时的高度,当它里

在css中如果分别用几个block来存放内容,且内容量不同,设置同宽未设同高时,常常出现高度不同样式不美观的问题,可以统一高度来解决,还有一种办法:

padding-bottom:2000px;
margin-bottom:-2000px;

利用padding-bottommargin-bottom正负值抵消;

设置父容器设置超出隐藏(overflow:hidden),这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,
当它里面的任 一列高度增加了,则父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116516.html

相关文章

  • css实现左右顶头、宽度自适应的多列、多块并排,多列布局

    摘要:今天在工作中遇到了一个问题有三个块,里面放置展示内容,并排,中间有间隙,两边顶头,可以随屏幕大小自适应宽度。首先就是可能会打乱的加载顺序,还有就是间距是不固定的,并且加了,可能会有副作用。 今天在工作中遇到了一个问题:有三个div块,里面放置展示内容,并排,中间有间隙,两边顶头,可以随屏幕大小自适应宽度。 我第一时间想到的是传统的三列布局,但传统的三列布局都是固定宽度加自适应宽度,从网...

    xuhong 评论0 收藏0
  • css实现左右顶头、宽度自适应的多列、多块并排,多列布局

    摘要:今天在工作中遇到了一个问题有三个块,里面放置展示内容,并排,中间有间隙,两边顶头,可以随屏幕大小自适应宽度。首先就是可能会打乱的加载顺序,还有就是间距是不固定的,并且加了,可能会有副作用。 今天在工作中遇到了一个问题:有三个div块,里面放置展示内容,并排,中间有间隙,两边顶头,可以随屏幕大小自适应宽度。 我第一时间想到的是传统的三列布局,但传统的三列布局都是固定宽度加自适应宽度,从网...

    anyway 评论0 收藏0
  • CSS 常用的定位和布局方法汇总(已添加源码地址)

    CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定位方法 水平居中 子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。 方案选择基本思路:子元素为 行内元素:对父元素设置text-align:center; 定宽块状元素: 设...

    loonggg 评论0 收藏0
  • css table布局大法,解决你大部分居中、多列等高、左右布局的问题

    摘要:基于这样的布局方式,你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章,你可以了解到以下布局方法: table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...

    lijinke666 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<