listview - JQueryMobileListviewがfloatimgとオーバーラップしています

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のマージンがあるため、タグを付けます。