Question

目标：无论内容如何，列都相同。我有这些卡片，无论内容如何，我都想要相同的高度。

我希望能够使用display：flex;但由于我需要支持低于IE8我不能。我的代码片段显示了我正在使用的网格。

＆＃13;

.row {
  display: table;
}

.row .one {
  width: 6.475%;
}

.row .two {
  width: 14.975%;
}

.row .three {
  width: 23.475%;
}

.row .four {
  width: 31.975%;
}

.row .five {
  width: 40.475%;
}

.row .six {
  width: 48.975%;
}

.row .seven {
  width: 57.475%;
}

.row .eight {
  width: 65.975%;
}

.row .nine {
  width: 74.475%;
}

.row .ten {
  width: 82.975%;
}

.row .eleven {
  width: 91.475%;
}

.row .twelve {
  width: 100%;
}

.column {
  display: table-cell;
  float: left;
  box-sizing: border-box;
}

.column:last-child {
  float: right;
}

.card {
  background: #fefefe;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1em;
  border: 1px solid #e5e5e5;
  border-left: 2px solid green;
  border-radius: 0 3px 3px 0;
}

＆＃13;

<div class="row">
  <div class="nine column card">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="three column card">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  </div>
</div>

＆＃13;

＆＃13; 如果您进行父显示：flex它可以很好地工作，但我需要旧浏览器的后备。

注意：我知道问题是我有浮动列但是这不能改变（我只是添加一个小的演示增强，我无法改变我正在使用的框架的整个网格。）

我想知道是否有办法绕过这个问题？

https://css-tricks.com/fluid-width-equal-height-columns/本文中使用表格和表格单元格的所有解决方案都是一个非常快速的解决方案，但它不起作用，因为我的列向左浮动（我再也无法改变这一点））。

有没有人遇到过这个问题？ Javascript是唯一可用的后备吗？

Answer 1

单向是强制min-height和max-height到行内的div具有相同的值。但是你需要溢出来防止你的内容超出元素。

＆＃13;

.row {
  display: table;
  
}
.row div{
 max-height:100px;
  min-height:100px;
 overflow:auto;
}

.row .one {
  width: 6.475%;
}

.row .two {
  width: 14.975%;
}

.row .three {
  width: 23.475%;
}

.row .four {
  width: 31.975%;
}

.row .five {
  width: 40.475%;
}

.row .six {
  width: 48.975%;
}

.row .seven {
  width: 57.475%;
}

.row .eight {
  width: 65.975%;
}

.row .nine {
  width: 74.475%;
}

.row .ten {
  width: 82.975%;
}

.row .eleven {
  width: 91.475%;
}

.row .twelve {
  width: 100%;
}

.column {
  display: table-cell;
  float: left;
  box-sizing: border-box;
}

.column:last-child {
  float: right;
}

.card {
  background: #fefefe;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1em;
  border: 1px solid #e5e5e5;
  border-left: 2px solid green;
  border-radius: 0 3px 3px 0;
}

＆＃13;

<div class="row">
  <div class="nine column card">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="three column card">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  </div>
</div>

＆＃13;

Flexbox后备。浮动列显示表+表格单元格

1 个答案: