forms - 向左浮动不能正常工作

Question

我正在尝试使表单响应。这是表单页面的链接 http://newdev.web-dorado.info/sahakj25/index.php/form除了包含两个复选框的 div 之外，一切正常。如果 div 的大小设置为 150px，则在调整页面大小时它不会向下移动，但是如果我将大小增加到 151px，它就可以正常工作。任何人都可以解释这可能是什么原因吗？

这是 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>

Answer 1

您需要为第 18 行的 div 指定一个宽度。看起来该 div 的宽度不够大，因此在您调整它的大小时不需要换行到下一行。如果您在调整“街道地址”文本框落到下一行的页面大小后仔细观察，该文本框的宽度大于第 16 行的 div 的宽度。由于包含选项的 div 是一个内联- block ，宽度仅为其中元素的大小，并且这些元素的宽度小于“街道地址”文本框，它不会换行。

这是我给那个 div 一个宽度的例子:http://jsfiddle.net/Gnax5/

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

但是如果您的选项标签更长，则您不需要这样做。例如，这是一个没有宽度的 div 的 fiddle ，但用更长的字符串替换了“option1”和“option2”:http://jsfiddle.net/sC4dC/