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;}

编辑固定：

所有给定的解决方案都无法与bootstraps响应类一起使用。不是它应该工作的方式，但我通过在.blokken（容器）div中放置一个带有三种颜色的bg来修复它：

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

感谢大家的帮助！

Answer 1

您错过了 .blok 类的display: inline-block，并为您的父块指定了width或display: block，此处为＆＃39; sa {{ 3}}

<强>更新而不是使用display:inline-block使用display: table-cell;并修复blok div 的宽度，例如 width: 33%;和float:none;。看看更新的小提琴。

fiddle

将3个div（高度100％）放置在容器div中（最小高度400px）

1 个答案: