3

我正在尝试使表单具有响应性。这是表单页面的链接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>
4

1 回答 1

2

你需要给第 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/

于 2013-08-27T15:05:01.943 回答