【样式布局】让浮动元素高度等于父元素高度的替换方案

虾仁不眨眼ok

已于 2022-05-20 10:14:22 修改

阅读量364

点赞数

分类专栏：知识沉淀方法封装文章标签： css css3 html

于 2022-05-19 12:00:42 首次发布

本文链接：https://blog.csdn.net/weixin_47093559/article/details/124859930

版权

方法封装同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

知识沉淀

4 篇文章 0 订阅

订阅专栏

原珊格布局

 <i-row class="workhour-vs-translate-content-box">
             <i-col span="14" class="content-project-left">
			</i-col>
			  <i-col span="14" class="content-member-right">
			</i-col>
	<i-row>

由于珊格系统是浮动撑起的，会造成左右高度不一致的效果，如下图（马赛克的是表格，自行脑补）

在这里插入图片描述

替代方案是用flex布局：1：父元素设置display：flex；2:左右子元素按照原有格子，分别设置为flex： 14，flex： 10

  .workhour-vs-translate-content-box {
      display: flex;
      .content-project-left {
          flex: 14;
          padding-right: 10px;
      }
      .content-member-right {
          flex: 10;
      }
    }