列中具有相同高度的多个块

Question

可以在css中创建如下布局（不使用flex）吗？列始终必须具有100％的高度。 他们的内容不会从上到下填充它们，所以我有这个问题：

jsfiddle

.holder {
    display: table;
    width: 100%;
}

.holder > div {
    display: table-cell;
}

<div class="holder" >
        <div class="col-left" >
            <div class="first" >
                <h3>title</h3>
                <p>text text text</p>
            </div>
            <div class="image-bottom" >
                <img src="path/to/image" alt="Image" />
            </div>
        </div>
        <div class="col-middle" >
            <div class="image-top" >
                <img src="path/to/image" alt="Image" />
            </div>
            <div class="second" >
                <h3>title</h3>
                <p>text text text</p>
            </div>
            <div class="image-bottom" >
                <img src="path/to/image" alt="Image" />
            </div>
        </div>
        <div class="col-right" >
            <div class="image-top" >
                <img src="path/to/image" alt="Image" />
            </div>
            <div class="third" >
                <h3>title</h3>
                <p>text text text</p>
            </div>
        </div>
</div>

Answer 1

Freewall插件可帮助您管理该效果。 See the main page.