使用DIV + CSS的layouit的语法？

Question

How can I get a master page for asp.net with 3 sections using divs to split the window into a left pane for a tree view navigation. 如何使用div将asp.net的主页分为3个部分，以将窗口拆分为用于树状视图导航的左窗格。 The main window to the right will be divided into a banner type top div and a main window div under it for the main content window where I want child pages loaded in the master page implementation. 右侧的主窗口将被划分为标题类型top div和其下的main窗口div，用于主要内容窗口，在该窗口中我希望子页面加载到母版页实现中。

can someone give me a syntax example? 有人可以给我一个语法示例吗？

Answer 1

I'd probably go for something like this: 我可能会选择这样的东西：

CSS: CSS：

body {
    margin: 0;
    padding: 0;
}
div#left {
    display: inline;
    float: left;
    height: 100%;
    width: 30%;
    background: #A00;
}
div#top_right {
    display: inline;
    float: right;
    height: 30%;
    width: 70%;
    background: #000;
}
div#bottom_right {
    display: inline;
    float: left;
    height: 70%;
    width: 70%;
    background: #CCC;
}

HTML: HTML：

<div id="left">
</div>
<div id="top_right">
</div>
<div id="bottom_right">
</div>

Put in background colours just to tell them apart, good luck! 放上背景色只是为了告诉他们，祝您好运！

Answer 2

Building upon Stann0rz answer, here is what a master page and content view could look like. 基于Stann0rz答案，这是母版页和内容视图的外观。 This example was done using ASP.NET MVC but would apply very closely to traditional ASP.NET Webforms. 此示例使用ASP.NET MVC完成，但将非常适用于传统ASP.NET Webforms。

MASTER PAGE: 主页面：

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    div#left {
        display: inline;
        float: left;
        height: 100%;
        width: 30%;
        background: #A00;
    }
    div#top_right {
        display: inline;
        float: right;
        height: 30%;
        width: 70%;
        background: #000;
    }
    div#bottom_right {
        display: inline;
        float: left;
        height: 70%;
        width: 70%;
        background: #CCC;
    }
</style>
</head>
<body>
    <div id="left">
        <ul>
          <li>Navigation Item 1</li>
          <li>Navigation Item 2</li>
        </ul>
    </div>
    <div id="top_right">
        <span>Tab 1</span>
        <span>Tab 2</span>
    </div>
    <div id="bottom_right">
        <asp:ContentPlaceHolder ID="BottomRightContent" runat="server">
    </div>
</body>
</html>

CONTENT VIEW: 内容视图：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="BottomRightContent" runat="server">
    [Bottom-right content goes here]
</asp:Content>

使用DIV + CSS的layouit的语法？

问题描述

2 个解决方案

解决方案1
3 已采纳 2010-08-09 13:34:12

解决方案2
1 2010-08-09 14:29:54

使用DIV + CSS的layouit的语法？

问题描述

2 个解决方案

解决方案1 3 已采纳 2010-08-09 13:34:12

解决方案2 1 2010-08-09 14:29:54

解决方案1
3 已采纳 2010-08-09 13:34:12

解决方案2
1 2010-08-09 14:29:54