自定义列表视图项布局答案

【问题标题】：Customize listview item layout自定义列表视图项布局
【发布时间】：2013-04-28 14:23:20
【问题描述】：

我想要的是每个列表项的布局，例如：

但我得到的更像是：

所以我想：

让div1占据一个特定的宽度，例如20px（百分比会更好...）并且要填充的高度是父高度（列表项高度）。我已经试过 put heigth:100% 但没有效果。
div2 应该占据水平空间的其余部分并带有一些填充。

如何操作 css 样式来做到这一点？

以下是我目前的代码：

<script id="listItemTemplate" type="text/x-jsrender">

    <li class="listItem">
        <div class="div1">&nbsp;</div>
        <div class="div2">Some content</div>   
    </li>

</script>

<style>
    .ui-li-static.ui-li {
        padding: 0px;
    }

    .listItem div {
        display: inline-block;
    }

    .div1{
        width: 20px;
    }

    .div2{
        padding: 15px;
    }
</style>

【问题讨论】：

标签： css listview jquery-mobile

【解决方案1】：

这样的？ DEMO

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: table;
    width: 100%;
}

li {
    display: table-row;
}

.listItem div {
    display: table-cell;
}

.div1 {
    width: 10%;
}

.div2 {
    width: 90%;
    padding: 15px;
}

【讨论】：

几乎...唯一不起作用的是div2的宽度。它不会占用其余的空间。和以前一样……会不会是和jQuery Mobile风格有关的东西？

【解决方案2】：

使用 jQuery Mobile 1.3 我使用了一个示例，使用文档中的 listview 小部件来实现我认为你想要的。

<ul data-role="listview">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
    <li><div class="div1">test</div><div class="div2wr"><div class="div2">test2</div></div><div class="clr"></div></li>
</ul>

<style type="text/css">
.div1, .div2wr{
    height:30px;    
}
.div1 {
    width: 10%;
    background:black;
    float:left;
}

.div2wr {
    width: 90%;
    float:right;

}
.div2 {
    margin:5px;
    height:20px; /* height must be height of div1/div2wr minus div2 margin X2 */
    background:blue;
}
.clr{
    clear:both;
}
.ui-li-static.ui-li{padding:0px;
}
</style>

【讨论】：

【解决方案3】：

我使用的解决方案是：

<script id="listItemTemplate" type="text/x-jsrender">

    <li class="listItem">
        <div class="div2" style="border-left-color: #{{:CorBack}};">
            Some content
        </div>
    </li>

</script>

<style>

    .ui-li-static.ui-li {
        padding: 0px;
    }

    .div2{
        padding: 15px;
        border-left-width:15px;
        border-left-style:solid;
    }
</style>

【讨论】：