专栏首页达摩兵的技术空间动态内容的等高布局实现

动态内容的等高布局实现

前言

本文将用不同的方式实现动态内容的等高布局。

场景描述

首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

<ul class="cont-wrap1">
  <li>12324134242342wrwt</li>
  <li>241</li>
</ul>  

方案 一 display:flex

特点:简单,高效,基本的现代浏览器都支持。

.cont-wrap1 {
  border:1px solid gray;
  padding:10px;
  overflow:hidden;
  display:flex;
  li{
  word-break:break-all;  
  margin-left:20px;
  border:1px solid red;  
  width:50px;}
}

方案 二 table 布局或者伪table

特点:没有兼容问题,但是元素显示不能符合预期(容器百分百的时候,元素设置的宽度无效;容器没有宽度的时候,不符合原来容器需求),而且比较受限于需要占满父容器,不过也是看你实际需求,有可能这正是你需要的。

.cont-wrap2 {
  border:1px solid gray;
  display:table;
  overflow:hidden;
  width:100px;
  li{
  display:table-cell;
  word-break:break-all;  
  border:1px solid red;  
  width:50px;}
}

方案 三 :绝对定位

实现固定的等高

特点:参考同一个父模型,同时实现等高利用top,bottom

.cont-wrap3{
  border:1px solid gray;
  padding:10px;
  height:100px;
  position:relative;
  .main,.left{
    position:absolute;
  word-break:break-all;  
  border:1px solid red;  
    width:50px;
    top:0;
    bottom:0;
  }
  .left{
  left:0;
  }
  .main{
    left:50px;
  }
}

侧边栏根据内容实现变化等高

特点:需要指定好变化的内容是哪部分,根据依赖项等高的原理。

.cont-wrap4 {
   border:1px solid gray;
  position:relative;
  width:100px;
  .main{
    margin-left:50px;
    border:1px solid red;  
    word-break:break-all; 
  }
  .left{
    position:absolute;
  word-break:break-all;  
  border:1px solid red;  
    width:50px;
    top:0;
    bottom:0;
  }

}

方案 4 :其他

利用背景图片

特点:纯效果模拟,利用整体布局的背景图片宽度相同,竖直方向重铺,各个元素的高度并未变化。不做过多的描述。

利用边框

特点:也是视觉效果的边框重合,并没有真实实现元素等高

.cont-wrap5 {
   border:1px solid gray;
  padding-left:50px;
  &:after{
    content:'';
    clear:both;
    display:table;
  }
  .left,.main{
    float:left;
    word-break:break-all;
  }
  .left{
    margin-left:-50px;
    width:50px;
    border-right:1px solid red;
  }
  .main{
    width:50px;
    margin-left:-1px;
    border-left:1px solid red;

  }
}

总结

综上,其实只要display:flex完整的能实现吧水平的浮动或者行内元素实现动态内容完整的等高布局。

参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深刻理解width:auto

    首先,我们需要清楚width默认值就是auto,所以不用去人为写代码控制其宽度自动哦。

    RobinsonZhang
  • 14年工作回顾(一)

    本文开始会把之前项目中遇到的一些问题进行分类整理,并得出其经验值。也许其本身在今天的技术架构中没有任何实用价值,但在项目开发中能有举一反三的作用。

    RobinsonZhang
  • css常规水平居中&&垂直居中方案

    无论水平居中还是垂直居中相信你并不陌生,但有多少种实现方式,每种的优劣以及兼容性相信你并不清楚。

    RobinsonZhang
  • 为博客添加恋爱天数小工具

    AlexTao
  • 博客园博客排版(js样式实例)

    昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,...

    Dawnzhang
  • 显示3D文字且左右摆动效果

    图片的进出特效前面介绍过不少,但是没有介绍过文字的特效,今天我来给大家介绍一种特效。相信大家在大街上都看到过店铺的招牌,有的招牌的文字为3D效果,并且后面还能看...

    无邪Z
  • 60个非常实用的CSS代码片段,千万要收藏好了!

    如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:

    winty
  • Js+Css做一个可弹起压下效果的按钮

    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程!

    何处锦绣不灰堆
  • WordPress美化之文章内页新增彩色渐变框【共9套】

    其实今天这个CSS之前博客内发过,最早是春节疫情期间在家美化向日葵的时候写的。今天突然心血来潮想到这个完全可以做到文章内页里。遂动手适配。在此分享给各位。钻芒博...

    AlexTao
  • 前端|CSS信封的制作方法

    利用Hbuilder来制作一个信封,此处使用的是先制作信封边框再进行文字加入的方法来设计。

    算法与编程之美

扫码关注云+社区

领取腾讯云代金券