0

我正在开发一个经典的 asp.net mvc 应用程序。我使用_Layout页面和它附带的所有 CSS。主 div 的 CSS 是：

#main {
    padding: 8px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}

我创建了一个看起来像这样的视图：

<div id="mainContainer">
<div id="drawForm">
@using (Html.BeginForm("UpdateDocument", "Forms", FormMethod.Post))
{
    <table border="1" id="drawDocument">
        <colgroup>
            <col span="1" style="width: 10%;" />
            <col span="1" style="width: 40%;" />
            <col span="1" style="width: 25%;" />
            <col span="1" style="width: 25%;" />
        </colgroup>
        @Html.Partial("_PartialHeader", Model)
        @Html.Partial("_PartialDrawing", Model)
        @Html.Partial("_PartialBody", Model)
        @Html.Partial("_PartialFooter", Model)

    </table>
    if (ViewBag.Status == 1)
    {
        <button type="submit" id="submitDocument">Запази</button> 
        <button style="float:right;" id="finalizeDocument">Приключи</button>  
    }
    else
    { 
        @Html.ActionLink("Назад", "Index")
    }
}
</div>
<div id="imageGallery"></div>
</div>

整个想法是将imageGallerynext 放置在drawForm我创建的原因和mainContainerdiv 旁边，因为我找到了一个具有这种结构的示例。但是，如果我的表的高度超过一定大小，则使用此结构，maindiv 停止扩展并且表超出了主 div 的边界，在此之前主 div 会根据表的需要扩展，无论有多大桌子。这是我认为的 CSS：

#mainContainer {
    margin: 0 auto;
    min-width: 800px;
    max-width: 950px;

    }
#drawForm 
{
    min-width: 690px;
    max-width: 800px;
    min-height: 800px;
    float: left;
    display: inline;
}
#imageGallery {
    width: 100px; 
    height: 700px;
    float: right; 
    display: inline;
    border: 2px solid grey;
    }
#drawDocument {
    /*border-collapse: collapse;
    result in strange behaviour in Firefox*/
    border-spacing: 0px;
    min-width: 690px;
    max-width: 100%;
}

现在我在同一级别上有两个 div 标签，但遇到了上述问题。如何更改 CSS 以便maindiv 标签根据表格的大小开始更改其大小？

4

0 回答 0