asp.net - CSS 无法正确停靠右侧面板

标签 asp.net css

我是 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/

相关文章:

css - HTML5 正文间距问题

asp.net - 防止 ASP.NET View 状态通过表单 GET 在查询字符串中传输

css - 在一个大元素上更新 Bootstrap

javascript - 在同一页面上显示内容

jquery - 如何从 ASPX 中的条形码扫描中检测 ENTER KEY

html - 带有导航栏菜单按钮的响应式背景图像

javascript - 不添加缓存 meta + php header 会导致 css/js 也不会缓存吗?

c# - 将 HttpPostedFileBase 传递给 Controller ​​方法

asp.net - Web 应用程序存在于本地 IIS Web 服务器和 IIS Express Web 服务器上

c# - 来自 C# 的 javascript unicode 属性