ASP.Net CSS MasterPages主要内容区域不会自动增加<span>标记</span>

时间:2012-09-07 08:17:00

标签: asp.net html css

我有一个母版页,可以为我的主要内容/信息所在的每个页面创建一个ContentPlaceHolder。在此我创建了一个名为main的div标签。

<div id="Main">
    <asp:ContentPlaceHolder ID="MainContent" runat="server">
    </asp:ContentPlaceHolder>
</div>

#Main
{
    background-color:White;
    padding: 15px 20px 15px 20px;
    margin: 0px 100px 10px 100px;
    border-radius: 4px 4px 4px 4px;
}

因此,内容占位符是一个很好的空白区域,信息可以进入。如果我进入页面并使用p标签在内容中写入一些内容,则空格会自动扩展。

但是我正在尝试在同一行创建2个span标签,我可以在左边添加窗格,在右边添加datagrid。但是目前我只用文本填充这些span标签。然而,白色空间不会自动扩展,我已经改变了span标签的高度,但它会进入页脚。有什么想法吗?

<asp:Content ID="SearchContent" ContentPlaceHolderID="MainContent" runat="server">

<span id="SearchLeftPanel" class="SearchDivs">
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
</span>

<span id="SearchRightPanel" class="SearchDivs">
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
</span>

.SearchDivs
{
   display:inline;
}
#SearchLeftPanel
{
    clear:both;
    float:left;
    width:25%;
    height:100px;    
}
#SearchRightPanel
{
   float:right;
   width:67%;
   height:100px;   
}

1 个答案:

答案 0 :(得分:1)

从您的CSS中删除height:100px并提供height:auto

如果您需要默认高度为100px,那么您可以像这样写

#SearchRightPanel
{
   float:right;
   width:67%;  
min-height:100px; 
height:auto
}

查看演示http://jsfiddle.net/YUTTh/1/

更新了演示http://jsfiddle.net/YUTTh/2/