Question

我正在开发一个经典的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>

整个想法是将imageGallery置于drawForm旁边，这就是我创建的原因和mainContainer div，因为我找到了一个具有此结构的示例。但是，如果我的表的高度超过一定大小，main div将停止扩展并且表格超出主div的边界之前使用此结构，在此之前主div正在扩展所需的表格，no这桌子有多大。这是我的观点的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以便main div标签根据表的大小开始改变它的大小？

当内部div标签扩展时展开主div元素

0 个答案: