Jquery div类没有排队答案

【问题标题】：Jquery div class not lining upJquery div类没有排队
【发布时间】：2015-03-13 06:41:50
【问题描述】：

在 Products 选项卡下，我选择了第一个选项，但是当我尝试在垂直列中排列数据时（每列中有 9 个复选框），它会生成一个空格，而不是对齐 group a 和 group b 列。

我相信语法是 class="ui-grid-a 或 class="ui-grid-b，我使用的。我在各个网站上看到了其他示例，但该代码似乎不适用于我的脚本。

我怎样才能让这些正确对齐？

谢谢。

<body>

<div data-role="page">
  <div data-role="header" data-theme="b" data-content-theme="b">
  <h1>FirePlace and BBQ Center</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <fieldset data-role="collapsibleset" data-theme="b" data-content-theme="b">

<div data-role="collapsible">
        <h3>Contact Information</h3>
<form name="htmlform" method="post" action="html_form_send.php">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>

</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>

</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>

      </div>
      <div data-role="collapsible">
        <h3>Products</h3>
        <select id="model">
<option id="select" value="0">Please Select Fire Place</option>
<option id="DXV35_III" value="1">Mendota DXV 35 DeepTimber Fire III Direct Vent Gas Fireplace</option>
<option id="DXV45_III" value="2">Mendota DXV 45 DeepTimber Fire III Direct Vent Gas Fireplace</option>
<option id="DXV35" value="3">Mendota DXV 35 Time Fire Direct Vent Gas Fire Place</option>
    <option id="DXV42" value="4">Mendota DXV 42 Direct Vent Gas Fireplace</option>
</select>

        <div data-role="content"id="div1" style="display:none;" >

                <div data-role="fieldcontain">
                    <fieldset class="ui-grid-a">



                <label for="DXV35_1">Millennia Black</label>
          <input type="checkbox" name="modeltype" id="DXV35_1" value="DXV35_1">
          <label for="DXV35_2">Millennia Classic Brass</label>
          <input type="checkbox" name="modeltype" id="DXV35_2" value="DXV35_2">
          <label for="DXV35_3">Millennia Full Brass</label>
          <input type="checkbox" name="modeltype" id="DXV35_3" value="DXV35_3">
          <label for="DXV35_4">Wellington</label>
          <input type="checkbox" name="modeltype" id="DXV35_4" value="DXV35_4">
          <label for="DXV35_5">Andover Doors & Faceplate</label>
          <input type="checkbox" name="modeltype" id="DXV35_5" value="DXV35_5">
           <label for="DXV35_6">Prairie Doors & Faceplate</label>
          <input type="checkbox" name="modeltype" id="DXV35_6" value="DXV35_6">
           <label for="DXV35_7">Deerfield (outside fit only)</label>
          <input type="checkbox" name="modeltype" id="DXV35_7" value="DXV35_7">
           <label for="DXV35_8">Victoria Black</label>
          <input type="checkbox" name="modeltype" id="DXV35_8" value="DXV35_8">
           <label for="DXV35_9">Victoria Gold</label>
          <input type="checkbox" name="modeltype" id="DXV35_9" value="DXV35_9">
           <label for="DXV35_10">Tuscany Black</label>
           </div>
            <div class="ui-block-b">
          <input type="checkbox" name="modeltype" id="DXV35_10" value="DXV35_10">
           <label for="DXV35_11">Tuscany Gold</label>
          <input type="checkbox" name="modeltype" id="DXV35_11" value="DXV35_11">
            <label for="DXV35_12">Bentley Black Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_12" value="DXV35_12">
           <label for="DXV35_13">Bentley Vintage Iron Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_13" value="DXV35_13">
          <label for="DXV35_14">Bentley Gold Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_14" value="DXV35_14">
          <label for="DXV35_15">Bentley Antique Copper Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_15" value="DXV35_15">
          <label for="DXV35_16">Bentley Gun Metal Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_16" value="DXV35_16">
          <label for="DXV35_17">Bentley Swedish Nickel Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_17" value="DXV35_17">
          <label for="DXV35_18">Andover/Prairie Doors & Faceplate Overlay (See Pricing Sheet)</label>
          <input type="checkbox" name="modeltype" id="DXV35_18" value="DXV35_18">
          </div>
          </div>



<div data-role="controlgroup" id="div3" style="display:none;">
                <label for="DXV35_1test">Millennia Black test</label>
          <input type="checkbox" name="modeltype" id="DXV35_1test" value="DXV35_1test">
          <label for="DXV35_2test">Millennia Classic Brass test</label>
          <input type="checkbox" name="modeltype" id="DXV35_2test" value="DXV35_2test">
          <label for="DXV35_3test">Millennia Full Brass test</label>
          <input type="checkbox" name="modeltype" id="DXV35_3test" value="DXV35_3test">
        </div>  
<div id="div2" style="display:none;">am div3</div>

      </div>
      <div data-role="collapsible">
        <h3>Installation</h3>
        <p>I'm the expanded content.</p>

      </div>
      <div data-role="collapsible">
        <h3>Other Tab to Be Determined</h3>
        <p>Test data</p>
      </div>
    </div>
  </div>    
      </fieldset>
    </form>
  </div>
</div>

这是一个链接http://jsfiddle.net/w22L5nyo/

【问题讨论】：

你为什么要把它们分开？为什么不将它们全部放在同一个容器中？
我对这个项目的移动设计经验很少，所以我不确定滚动是否比普通的 html 表单框区域更好。
也许我不明白你的问题，但你是说点击产品>然后选择第一个选项......然后托斯卡纳黑，其余的比上面的更小，间距更大..对吗？

标签： javascript jquery html jquery-mobile alignment

【解决方案1】：

如果您真的打算使用 jQM 网格将 2 个列表并排放置，那么您只需省略该行：<div class="ui-block-a">

<fieldset class="ui-grid-a">
    <div class="ui-block-a">
       //your radios for col 1
    </div>
    <div class="ui-block-b">
        //your radios for col 2
    </div>
</fieldset>

更新FIDDLE

此外，您还有很多多余的、不必要的 DOM 元素和一些缺少的结束标记...

【讨论】：

这太完美了，谢谢，就像我说我是代码新手，大约 1 周。感谢您的帮助

【解决方案2】：

为 ui-field-contain 类添加 float:left 到 css 并移除上边距

              <div data-role="fieldcontain" style="float:left; margin:0px">

http://jsfiddle.net/w22L5nyo/2/

【讨论】：

【解决方案3】：

我可能不完全理解您的问题，但是您为什么不直接删除带有 .ui-block-b 类的 div 容器，该容器将两个部分分开并将它们全部放在同一个容器中，如下所示：

   ...
   <input type="checkbox" name="modeltype" id="DXV35_9" value="DXV35_9">
   <label for="DXV35_10">Tuscany Black</label>
</div> //<-----------------------------------------------------------remove
<div class="ui-block-b"> //<-----------------------------------------remove
   <input type="checkbox" name="modeltype" id="DXV35_10" value="DXV35_10">
   <label for="DXV35_11">Tuscany Gold</label>
   <input type="checkbox" name="modeltype" id="DXV35_11" value="DXV35_11">
   <label for="DXV35_12">Bentley Black Arch Screen Doors</label>
   ...

FIDDLE

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
你现在可以删除不赞成票，我添加了一些代码，我完全知道如何发布 anwser，在这种情况下有很多代码并且删除少量（我已经完成）不一定说明问题。无论如何，我最初在我的链接中包含了一个解释@DLeh