为什么我的文字在元素下面?

时间:2014-07-17 02:31:06

标签: html css css3

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

如您所见,文本Filename Some descr显示在底部,我希望它显示在ligth-grey框内。

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

以这种方式,如果我将// this should be responsive. 50%, 25%, 33.33333%之前的行更改为任何这些数字,它应该可以正常工作。

4 个答案:

答案 0 :(得分:1)

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

演示:jsFiddle

答案 1 :(得分:1)

您可以将float: left样式添加到.OD-template-file > img和。OD-template-file > .OD-template-info

答案 2 :(得分:1)

我不知道您是如何决定以这种方式使用这些标签的,但您可以将float:left;添加到.OD-template-file > img

答案 3 :(得分:1)

我已更新您的fiddle.

我使用inline-tabletable显示,以便它们的宽度相对于其内容。 让vertical-align:top使文本与顶部对齐,与其他文本类似。

.OD-template-info {
    display: inline-table;    
    vertical-align: top;
}

.OD-template-info > * {
    display: table;
}