Question

我想修复容器中不同内容大小造成的差距。

http://ctrlv.cz/85Mm http://ctrlv.cz/YBpa

import kernel = from "./inversify.config";

var ninja = kernel.get<INinja>("INinja");

expect(ninja.fight()).eql("cut!"); // true
expect(ninja.sneak()).eql("hit!"); // true

Answer 1

选项1：在每个盒子上设置一个最小高度，即使是最大的盒子也是如此：

.box {
  min-height: 200px;
}

选项2：使用javascript获取任何框的最大高度，并将每个框设置为具有该高度。

var maxBoxHeight = 0;

$('.box').each(function(){
  var height = $(this).height();

  if(height > maxBoxHeight) {
    maxBoxHeight = height;
  }  
});

$('.box').css({'height', maxBoxHeight + 'px' });

Answer 2

你想要使用的是flexbox（它除了填充高度之外还有很多用途）

.main_a {
  display:flex;
  flex-direction:row;
  align-items:stretch;
}

HTML / CSS内容高度最大

2 个答案: