我正在尝试使用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%
之前的行更改为任何这些数字,它应该可以正常工作。
答案 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-table
和table
显示,以便它们的宽度相对于其内容。
让vertical-align:top
使文本与顶部对齐,与其他文本类似。
.OD-template-info {
display: inline-table;
vertical-align: top;
}
.OD-template-info > * {
display: table;
}