html - 在容器 div(最小高度 400px)中放置 3 个 div(高度 100%)

Question

我试图将三个包含内容的 div 放置在具有最小高度的容器 div 中，但它不起作用。我希望右边的两个 div 具有与第一个相同的高度并取决于内容的长度，因此彩色字段具有相同的高度。 col-lg-4 类是 Bootstrap 。非常感谢任何建议!

html:

<div class="blokken row">
            <div class="col-lg-4 blok blok1">
             <h2>title</h2><p>Long text</p>
            </div>
            <div class="col-lg-4 blok blok2">
             <h2>Title</h2><p>Short text</p>
            </div>
            <div class="col-lg-4 blok blok3">
             <h2>Title</h2><p>short text</p>
            </div>
</div>  

CSS:

.blokken {min-height: 400px;}
.blok {padding: 40px;height: 100%}
.blok1{background: #ff9aa4;}
.blok2{background: #9aa8ff;}
.blok3{background: #b4ff9a;}

编辑修复:

所有给定的解决方案都不能很好地与 Bootstrap 响应类一起使用。这并不是它应该的工作方式，但我通过在 .blokken(容器)div 中放置一个具有三种颜色的 bg 来修复它:

.blokken {
min-height: 400px;
background-image: url("../img/bg-content.jpg");
background-repeat: repeat-y;
background-size: 100%;
}    

感谢大家的帮助!

Answer 1

您错过了 display: inline-block 用于您的 .blok 类，并指定 width 或 display: block 对于你的父 block ，这是一个 fiddle

更新 而不是使用 display:inline-block 使用 display: table-cell; 并固定 blok div 的宽度 eg. width : 33%; 和 float:none;。查看更新后的 fiddle 。

http://jsfiddle.net/wkbu56ju/2/