html - 具有相同高度的列中的多个 block

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.