我有一个主页面,它为我的主要内容/信息所在的每个页面创建一个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/