我是 ASP 和 CSS 的新手,所以这个问题,我相信,对很多人来说都是非常基础的。
我正在尝试创建一个网页,其中左侧有一个面板,右侧有一个面板,中间是主要内容。
我的标记如下所示 -
<body>
<div id="Header">
<a id="A1" runat="server"></a>
</div>
<div id="LeftPanel">
This is my LeftPanel</div>
<form id="form1" runat="server">
<div id="MainContent">
<asp:ContentPlaceHolder ID="cpMainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="RightPanel">
This is my RightPanel</div>
</form>
</body>
我有一个单独的 CSS 文件来提供布局细节,它是这样写的 -
#LeftPanel
{
margin-left: 100px;
margin-top: 50px;
margin-right: 25px;
border-width: 1px;
border-style: ridge;
border-color: rgb(0, 165, 240);
width: 200px;
height: 500px;
float: left;
}
#MainContent
{
color: Black;
margin-left: 120px;
margin-top: 50px;
margin-right: 25px;
width: 1000px;
height: 500px;
}
#RightPanel
{
margin-top: 50px;
border-width: 1px;
border-style: ridge;
border-color: rgb(0, 165, 240);
width: 200px;
height: 500px;
}
现在,我的 LeftPanel 根据需要出现在屏幕左侧,而我的 MainContent 出现在 LeftPanel 的右侧(同样按计划)。但是,由于某些原因,我无法计算出我的 RightPanel 出现在屏幕的左侧以及 LeftPanel 和 MainContent 部分的下方。
我很确定它会很简单,但正如我所说,我对 ASP 和 CSS 还很陌生。
最佳答案
添加
float: left;
到#MainContent 和#RightPanel
我也想知道,这是不是有点太多了:width: 1000px;
关于asp.net - CSS 无法正确停靠右侧面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17363508/