jquery-mobile-960 流体布局在 <li> 内使用时会散布网格块答案

【问题标题】：jquery-mobile-960 fluid layout intersperses grid blocks when used inside an <li>jquery-mobile-960 流体布局在 <li> 内使用时会散布网格块
【发布时间】：2014-07-02 08:38:51
【问题描述】：

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

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

1X2 网格 1X10 网格

1X4 网格

          <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> 内或其他位置。

对此有什么想法吗？

【问题讨论】：

标签： jquery html css jquery-mobile jquery-plugins

【解决方案1】：

看起来您的列表视图标记中在 grid_4 div (</div>>) 之后只有一个额外的结束 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

【讨论】：