Question

在构建响应式jQuery Mobile列表视图时，我需要帮助。我有点卡住了。

我想要的是具有响应（自动缩放）图像的缩略图列表视图，基于视口的大小。

我坚持使用display: inline-table;的布局。有没有办法完成或替代，例如媒体查询？

为了说明我的担忧，我做了一个jsfiddle。

Fiddle

我希望文本垂直居中。即使在调整大小时，箭头也应保持在各自的位置，但当容器缩小时，它们会离开它们的边界。

在github（look here）上曾经有一个类似的线程，有些人发布了一个基于javascript的解决方案，但我不知道是否有CSS3解决方案。

感谢任何帮助。

更新这个小提琴here正在调整图像大小，但不保持宽高比。

Answer 1

如果您没有任何针对html表的内容，那么这很容易做到

这是 DEMO

该表格包含图像，文本和缩略图的单独单元格。缩略图td宽度设置为特定的像素值，因此它永远不会改变。图像td设置为30％，图像大小设置为视口大小。文本td占据了空间的其余部分并垂直对齐到中间。其余的是css造型，以获得你想要的外观：

<div class="div-list">    
<table class="listTable" >
    <tr>
        <td class="list-elem-thumb">  
            <img src="http://splusk.de/wp-content/uploads/2010/03/metro-2033-20091102111356147_640w1.jpg" />
        </td>
         <td class="list-elem-text">  
             asdasdasdasd
        </td>
         <td class="list-elem-ico">  
            <div class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</div>
        </td>
    </tr>
</table>
</div>

.div-list {
    border-radius: 0.6em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid #CCCCCC;
    padding: 2px;
}
.listTable {
    width: 100%;
    border-radius: 0.6em;
    border-collapse: collapse; border-spacing: 0;
}
.listTable tr:not(:first-child) > td {
    border-top: 1px solid #CCCCCC;
}
.listTable tr {
    background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
    color: #222222;
    font-weight: bold;
    text-shadow: 0 1px 0 #FFFFFF;
}
.listTable td {
    vertical-align: middle;
    padding: 0;
}
.listTable .list-elem-thumb{
    width: 30%;
    padding: 2px;
}
.listTable .list-elem-thumb img {
    max-width: 100%;
    min-height: 50px;
    min-width: 125px;
}
.listTable .list-elem-text {
    padding-left: 10px;
}
.listTable .list-elem-ico {
     width: 24px;
}

更新：max-width不适用于FireFox，也可以添加宽度：

.listTable .list-elem-thumb img {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    min-width: 125px;
}

<强> DEMO

jQuery Mobile响应式缩略图列表视图

1 个答案: