1. 首頁
  2. 問答
  3. Jquery div類不排隊

Jquery div類不排隊

2015-01-14 85 views
0

在Products選項卡下，我選擇第一個選項，但是當我嘗試排列垂直列中的數據（每個列中有9個複選框）時，它會生成一個空格而不是對齊組a和B組列。Jquery div類不排隊

我相信語法是class =「ui-grid-a or 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/

來源

2015-01-14 Merchandise

+0

你爲什麼要把它們打破？爲什麼不把它們都放在同一個容器中？ – jmore009

+0

我對這個項目的移動設計很少有經驗，所以我不確定滾動是否比正常的html表單框區域更好。 – Merchandise

+0

也許我不明白你的問題，但你說的點擊產品>然後選擇第一個選項...然後托斯卡納黑和其他更小，間隔更多比上述..正確？ – jmore009

回答

0

如果你真的打算在使用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元素和一些失蹤的結束標籤...

來源

2015-01-15 14:57:40 ezanker

+0

這是完美的，謝謝，就像我說的我是新手代碼，大約1周。感謝您的幫助 – Merchandise

-1

我不能完全理解你的問題，但爲什麼你不要刪除div類容器與.ui-block-b類分開這兩個部分，並把他們都在同一個公司ntainer這樣的：

... 
    <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

來源

2015-01-15 02:31:47 jmore009

+0

儘管這個鏈接可能回答這個問題，但最好在這裏包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – DLeh

+0

您現在可以刪除downvote，我添加了一些代碼，即時通訊完全知道如何發佈anwser，在這種情況下，有很多代碼並刪除少量（完成）並不一定說明問題。我包括一個解釋與我的鏈接本來反正@DLeh – jmore009

+0

fyi我沒有downvote。 – DLeh

相關問題

 相關問題