Question

以下代码来自ASP MVC3视图。前两个“容器”div元素（topDiv和middleDiv）工作得很好。 fieldsets从左到右正确对齐。但是，bottomDiv元素没有。在此“容器”中，leftDiv一直排列在BigDiv“容器”的右侧，而rightDiv在leftDiv元素下面并且在屏幕的左侧。

显然没有那么好的w / HTML / CSS定位（这些div元素当前都没有附加CSS，只是试图让所有内容排成一行），所以如果有人能告诉我发生了什么，那么非常感谢。

由于在所有fieldsets组合中有超过1000行HTML / Razor语法，我附加了代码的这个区域。如果有人需要查看具体的fieldset，我会很高兴发帖。

<div id="BigDiv" style="clear:both;">
    @Html.HiddenFor(model => model.CreatedDate)
    @Html.HiddenFor(model => model.CreatedOperator)
    @Html.HiddenFor(model => model.ReferenceNumber)
    @Html.HiddenFor(model => model.ReferenceType)
    @Html.HiddenFor(model => model.ExtRepType) 
    @Html.HiddenFor(model => model.Region)
    @Html.HiddenFor(model => model.INDDist)
    <div id="topDiv">
        <div class="LeftDiv" style="width: 450px; float:left;">
            <fieldset id="AgentTypeFields" style="width: 400px;">...</fieldset>
        </div> 
        <div class="RightDiv" style="width: 450px; float:left;">
            <fieldset id="DistributionFields" style="width: 400px;">...</fieldset>
        </div>
    </div>
    <div id="middleDiv">
        <div class="LeftDiv" style="width: 450px; float:left;">
            <fieldset id="BasicFields" style="width: 400px;">...</fieldset>
        </div>
        <div class="RightDiv" style="width: 450px; float:left;">
            <fieldset id="DRMFields" style="width: 400px;">...</fieldset>
        </div>
    </div>
    <div id="bottomDiv">
        <div class="LeftDiv" style="width: 450px; float:left;">
            <fieldset id="AddressFields" style="width: 400px;">...</fieldset>

            <fieldset id="CommunicationFields" style="width: 400px;">...</fieldset>
        </div>
        <div class="RightDiv" style="width: 450px; float:left;">
            <fieldset id="DSSAgentIds" style="width: 400px;">...</fieldset>

            <fieldset id="DSSFields" style="width: 400px;">...</fieldset>
        </div>
    </div>
    <p>
        <input type="submit" value="Save" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        @Html.ActionLink("Back to Search", "Index", "Agent")  
    </p>
</div>

以下是结果的屏幕截图。 Producer Info和Distribution是divs的左右topDiv。 Basics和DRM组成middleDiv。 Addresses {显然}对应AddressFields中的fieldset bottomDiv。

enter image description here

以下是页面底部的屏幕截图。 DSS Agent ID是fieldset元素的RightDiv中的第一个bottomDiv。

enter image description here

Answer 1

将此标记添加到bottomDiv解决了问题

<div id="bottomDiv" style="clear:both;">

不确定为什么。如果有人能给出更好的答案就会喜欢接受。 THX

div元素不能正确排列（并排）

1 个答案: