html - 为什么我的文字在元素下方？

Question

我正在尝试使用 CSS 进行响应式设计。一切都很好，但有一个问题:我无法在需要的位置放置几个带有文本的 div。很难理解我的意思，所以here is a fiddle .

如您所见，文本 Filename Some descr 显示在底部，我希望它出现在浅灰色框内。

<div class="OD-grid">
    <span class="OD-template">
        <span class="OD-template-folder">Folder</span>
    </span>
    <span class="OD-template">
        <span class="OD-template-file">
            <img src="public/img/image.png"/>
            <span class="OD-template-info">
                <div> Filename</div>
                <div> Some descr</div>
            </span>
        </span>
    </span>
</div>


.OD-grid > .OD-template{
    display: block;
    float: left;
    height: 90px;
    width: 33.333333%;            // this should be responsive. 50%, 25%, 33.33333%
}

.OD-template-folder{
    display: block;
    margin: 5px;
    cursor: pointer;
    height: 70px;
    background-color: #9FB9CA;
    padding: 10px 0 0 10px;
    background: #0072c6;
    color: white;
    font-size: 17px;
}

.OD-template-file {
    display: block;
    margin: 5px;
    cursor: pointer;
    height: 80px;
    background-color: #eaecee;
}

.OD-template-file > img{
    padding: 16px;
    width: 48px;
    height: 48px;
    background: #b1b1b1;
}

以这种方式，如果我更改 //之前的行，这应该是响应式的。 50%、25%、33.33333% 到这些数字中的任何一个，它应该可以正常工作。

Answer 1

给 .OD-template-info 类样式显示:inline-block 这将使文本进入浅灰色区域

演示:jsFiddle