css 多列等高

cncoder 发布于2019-08-30 13:02 / 1897人阅读

摘要：多列等高高度不一的列以等高方式布局。需求设计师说某页面的新闻介绍，由于新闻内容不同导致显示区域的高度不一致，现需要使其高度视觉上保持一致。

多列等高

高度不一的列以等高方式布局。

需求

设计师说某页面的新闻介绍，由于新闻内容不同导致显示区域的高度不一致，现需要使其高度视觉上保持一致。小加同学觉得必须迅速解决，让设计师妹妹知道我们程序师哥哥的威武。原型设计稿大致如下:

bootstrap 栅格系统 思路

直接使用bootstrap的col-*来实现这个简单的布局就OK啦～

HTML

</>复制代码 
  
    初版
    
      
        
          科比狂砍35
          在火箭对阵湖人的比赛中,科比单节15分,梦回巅峰狂砍35分~
        
      
      
        
          勇士72胜
          今日勇士于马刺的比赛中,库里单节16分的气势再也压不住,末节的柳暗花明,不仅仅是拥抱72胜的欣喜若狂,也是终结连续33场客负马刺这一尴尬记录的仰天长啸,更是打破尘封20年纪录的蠢蠢欲动.
        
      
      
        
          德罗赞得分里程碑
          猛龙客场挑战尼克斯,最终93-89战胜对手.此役德罗赞砍下27分,他职业生涯总得分达到9426分,超越文斯-卡特,跃居猛龙队史得分榜第2位,仅次于克里斯-波什.
        
      
      
        
          安东尼21+6
          在尼克斯对阵猛龙的比赛中,安东尼里突外投,砍得21分6篮板.
        
      
      
        
          马刺战勇士1胜3负
          马刺在主场以86-92不敌勇士,遭遇本赛季主场首败.他们主场连胜纪录停留在48场,包括创NBA纪录的开局主场39连胜.
        
      
      
        
          哈登末节20分
          在火箭对阵湖人的比赛中,哈登末节20分,大力劈扣轰40+13.

CSS

</>复制代码 
  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }

效果图

吐槽

什么情况，一行三个、二个，这看起来太乱了，肯定会遭设计师鄙视的～必须采用淫技解决这个问题，让设计师妹妹崇拜哥～

分割线来咯～你能够尝试着解决这个问题吗？

clear 清除浮动 思路

由于内容不同的新闻其高度不一致，使元素左浮动卡在高度最大的右边，可以使用clear: left;来解决这个问题。

CSS

</>复制代码 
  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
  @media (min-width: 768px) {
    .section-revision--clear .section__item:nth-child(odd) {
      clear: left;
    }
  }
  @media (min-width: 992px) {
    .section-revision--clear .section__item:nth-child(odd) {
      clear: none;
    }
    .section-revision--clear .section__item:nth-child(4) {
      clear: left;
    }
  }

效果图

padding + position 思路

参照不规整元素的宽高等比例，预估高度范围，使用padding属性完成～

CSS

</>复制代码 
  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
  @media (min-width: 768px) {
    .section-revision--padding .section__item {
      position: relative;
      padding-top: 25%;
    }
    .section-revision--padding .section__item-wrap {
      position: absolute;
      top: 0;
      margin: 5px;
    }
  }
  @media (min-width: 1200px) {
    .section-revision--padding .section__item {
      position: relative;
      padding-top: 20%;
    }
  }

效果图

table 思路

table中一行的每个格子都是等高的，那么我们可以使用css的display: inline-table来解决这个问题。

CSS

</>复制代码 
  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
  .section-revision--table .section__items {
    display: table-row;
  }
  .section-revision--table .section__item {
    display: inline-table;
    float: none;
  }

效果图

flexbox 思路

使用神器flexbox，它能简单的搞定一切～

CSS

</>复制代码 
  .section {
    margin-bottom: 100px;
  }
  .section__items {
    width: 100%;
  }
  .section__item-wrap {
    margin: 5px;
    padding: 10px;
    background-color: #EEE;
  }
  .section-revision--flex .section__items {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

效果图

关键知识点

</>复制代码 
clear
</>复制代码 
w3school
padding
</>复制代码 
ipluser
display: inline-table
</>复制代码 
w3school
flex
</>复制代码 
ruanyifeng

资源 在线测试 源代码

GPU云服务器云服务器等高三列等高等高线多列数据

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

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

css布局：多列等高布局

摘要：多列等高布局是在一个容器里面，并排的多列，如果内容的高度无法在一开始确定例如内容是动态的，又需要让各列自然地撑开不出现每列里面的滚动条，这时候需要用或者的方法把各列高度设置为最高列的高度。多列等高布局是在一个容器里面，并排的多列，如果内容的高度无法在一开始确定（例如内容是动态的），又需要让各列自然地撑开（不出现每列里面的滚动条），这时候需要用css或者js的方法把各列高度设置为最高列...

Ethan815 2019-08-29 15:05 评论0 收藏0
css 多列等高

摘要：多列等高高度不一的列以等高方式布局。需求设计师说某页面的新闻介绍，由于新闻内容不同导致显示区域的高度不一致，现需要使其高度视觉上保持一致。多列等高高度不一的列以等高方式布局。需求设计师说某页面的新闻介绍，由于新闻内容不同导致显示区域的高度不一致，现需要使其高度视觉上保持一致。小加同学觉得必须迅速解决，让设计师妹妹知道我们程序师哥哥的威武。原型设计稿大致如下:showImg(ht...

sarva 2019-08-02 15:54 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

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

lijinke666 2019-08-29 11:22 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

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

hedge_hog 2019-08-20 11:16 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

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

kun_jian 2019-08-01 15:45 评论0 收藏0