listview - JQuery Mobile Listview 与浮动 img 重叠

Question

我正在尝试构建一个简单的页面，该页面在左侧显示图像，在右侧显示带有列表视图的描述。虽然似乎服从图像浮动，但列表视图占用了 100% 的页面，与图像本身重叠。

这是一个例子：http: //jsfiddle.net/NYwux/

我已经尝试过这个<fieldset class=\"ui-grid-a\">解决方案——它可以工作，但我不想要一个完美的 50% - 50% 分割，而是一个自然的浮动行为。

这可能吗？

Answer 1

HTML：

<div data-role="content">    

    <img style="float: left; max-width: 100px;" src="http://softsupplier.com/wp-content/uploads/2010/07/placeholder.png" alt="description" title="description" />

    <div id="wrap">
        <p>TEST TEXT.</p>
        <ul data-role="listview" data-inset="true" data-filter="true">
        <li><a href="#">1<sup>st</sup> Item</a></li>
        <li><a href="#">2<sup>nd</sup> Item</a></li>
        </ul>    
    </div>
    <p>TEST TEXT.</p>        
</div>

CSS：

​#wrap{margin-left:110px;}
#wrap p{margin-bottom:15px;}

我把 15px 的边距放在

标记，因为 JQM 列表视图有 -15px 的边距。