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是内联的 - 块，并且只有宽度与其内部元素的大小，并且这些元素的宽度小于“街道地址”文本框，它不会换行。

以下是我为该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/

浮动左侧不能正常工作

1 个答案: