浮動左側不能正常工作

我正在嘗試使窗體響應。以下是表單頁面的鏈接http://newdev.web-dorado.info/sahakj25/index.php/form 除了包含兩個複選框的div以外，一切正常。如果div的大小設置爲150像素，則在調整頁面大小時不會向下移動，但如果將大小增加到151像素，則可以正常工作。任何人都可以解釋這可能是什麼原因嗎？浮動左側不能正常工作

這裏是的jsfiddle例如：http://jsfiddle.net/PcscG/

我試圖浮動左邊的DIV上線18

<div wdid="2" class="wdform_row"> 
      <div type="type_checkbox" class="wdform_field"> 
      <div class="wdform-label-section" style="float:left; width: 150px;"><span class="wdform-label">Checkbox:</span></div> 
      <div class="wdform-element-section " style="float:left;"> 
       <div style="display: table;"> 
       <div style="display: table-row-group;"> 
        <div style="display: table-row-group;"> 
        <div style="display: table-row;"> 
         <div valign="top" idi="0" style="display: table-cell;"> 
         <label id="2_label_element0" class="wdform-ch-rad-label" for="2_element130">option 1</label> 
          <input type="checkbox" id="2_element130" name="2_element130" value="option 1"> 
         </div> 
        </div> 
        <div style="display: table-row;"> 
         <div valign="top" idi="1" style="display: table-cell;"> 
         <label id="2_label_element1" class="wdform-ch-rad-label" for="2_element131">option 2</label> 
         <input type="checkbox" id="2_element131" name="2_element131" value="option 2"> 
         </div> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div>

來源

2013-08-27 Sahak Sahakyan

請顯示您的代碼，也許在Fidlle中，不只是鏈接到一個頁面，並希望有人會執行你的所有代碼來發現錯誤。 needle => haystack – Mark

這裏是JSFiddle的例子：http://jsfiddle.net/PcscG/ 我試圖向左浮動的div在第18行。 –

你需要給DIV上線18的寬度。它看起來像那個div的寬度不夠大，所以當你重新調整它的大小時，它不需要換行到下一行。如果在重新調整「街道地址」文本框下一行的頁面大小後仔細觀察，該文本框的寬度大於第16行上div的寬度。由於包含選項的div是內聯的，塊並且只有寬度爲其內部元素的大小，並且這些元素的寬度比「街道地址」文本框的寬度小，因此不會進行換行。

這裏就是我給該分區的寬度的例子：http://jsfiddle.net/Gnax5/

<div class="wdform-element-section " style="float:left;border:1px solid blue; width:200px;">

你不必然而要做到這一點，如果你的選項標籤是更長的時間。例如，這裏有一個沒有寬度的div的小提琴，但用一個更長的字符串替換'option1'和'option2'：http://jsfiddle.net/sC4dC/

來源

2013-08-27 15:05:01

浮動左側不能正常工作

回答

相關問題