ASP.Net CSS 母版页主内容区域不会随标签自动增加<Span>



我有一个主页面,它为我的主要内容/信息所在的每个页面创建一个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标签在内容中写一些东西,空白会自动扩展。

然而,我试图在同一行上创建两个span标记,在那里我可以在左边添加窗格,在右边添加数据网格。但目前我只用文本填充了这些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;   
}

从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/

最新更新