Question

我有以下HTML：

<fieldset>
    <legend>Details</legend>

    <div class="form-section first">
        <div class="abc">
            <div class="editor-label">
                <label for .../>
            </div>
            <div class="editor-field">
                <input type="text" ... />
            </div>
        </div>

        <div class="def">
           ...
        </div>

        <div class="ghi">
           ...
        </div>
    </div>

    <div class="form-section">

    </div>

    <div class="form-section last">
    </div>
</fieldset>

我有一个包装所有表单元素的字段集。字段集包含多个表单节，基本上包含一个“行”内容。表单部分中的div我想浮动到左侧：

|||||||    |||||||      |||||||   <-- first form section, 3 floated elements

|||||||    |||||||||||            <-- second form section, 2 floated elements

将这些元素浮动的正确方法是什么：

1）第二个表单部分单独出现。 2）第二个表格部分可以应用上边距。

我似乎无法做对。我需要解决方案在IE7中工作。我试着说清楚：两者都在form-section元素上，但它似乎没有正常工作。所有5个元素都出现在同一行而不是2个单独的行。

**编辑**

我可以稍微开始工作。我的问题如下：当我将元素浮动到容器中时，它们基本上具有0高度。如果他们想要应用上边距，这会弄乱任何容器。

Answer 1

对于三行的尝试：

<div style="clear:both; width:100%;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
    <div style="float: right;"></div>
</div>
<div style="clear:both; width:100%; height:10px;"></div>
<div style="clear:both; width:100%;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

这应该可以获得所需的输出。

Answer 2

<fieldset>
            <legend>Details</legend>
            <div id="section 1">
                <span style="height: 500px;">1</span>
                <span style="height: 500px;">2</span>
                <span style="height: 500px;">3</span>
            </div>

            <div id="section 2" style="margin-top: 50px;">
                <span>4</span>
                <span>5</span>
            </div>

</fieldset>

浮动元素的正确方法

2 个答案: