jquery-mobile-960 流体布局在内部<li>使用时会穿插网格块

Question

我使用jquery-mobile-960的流体布局http://jeromeetienne.github.io/jquery-mobile-960/demoFluid.html。

当我使用container_12类直接在一个页面或一个部分，我得到想要的结果，即，前两个网格在单行和第二个网格在下一行

---

1X2网格1X10网格

1 x4网格

          <div class="container_12">
            <div class="grid_2">
              1X2 grid
            </div>
            <div class="grid_10">
              1X10 grid
            </div>
            <div class="grid_4">
              1X4 grid
            </div>
          </div>

但是当我在一个<li>中使用相同的，那么结果是完全不同的。第三个网格与前两个网格穿插在一起。

<div data-role="content" role="main">
  <ul data-role="listview" data-theme="c">
      <li data-icon="false">
        <a href="#">
          <div class="container_12">
            <div class="grid_2">
              1X2 grid
            </div>
            <div class="grid_10">
              1X10 grid
            </div>
            <div class="grid_4">
              1X4 grid
            </div>
          </div>>
          </div>
        </a>
      </li>
      <li data-icon="false"><a href="#">No icon</a></li>
  </ul>
</div> 

我认为<div>是<div>，不管它位于哪里-在<li>内部或其他。

对此有什么想法吗?

Answer 1

看起来你只是有一个额外的关闭div和一个额外的尖括号在你的listview标记grid_4div (</div>>)之后。试试这个:

 <ul data-role="listview" data-theme="c">
  <li data-icon="false">
    <a href="#">
      <div class="container_12">
        <div class="grid_2">
          1X2 grid
        </div>
        <div class="grid_10">
          1X10 grid
        </div>
        <div class="grid_4">
          1X4 grid
        </div>
      </div>
    </a>
  </li>
  <li data-icon="false"><a href="#">No icon</a></li>

这是一个DEMO