Html 将屏幕分为4个象限,每个象限周围有边框,不使用表单标记

Html 将屏幕分为4个象限,每个象限周围有边框,不使用表单标记,html,css,asp.net,Html,Css,Asp.net,我试图把一个网页分成4个象限。我从这个网站上得到了以下代码。只要不添加表单标记,它就可以工作。我要表格标签。如何使用以下代码实现4象限区域 我不擅长css。请帮忙 这是我的密码 <html> <head> <style type="text/css"> html, body { padding: 0; margin: 0; height: 100%; min-height: 1

我试图把一个网页分成4个象限。我从这个网站上得到了以下代码。只要不添加表单标记,它就可以工作。我要表格标签。如何使用以下代码实现4象限区域

我不擅长css。请帮忙

这是我的密码

<html> 
<head>
   <style type="text/css">
   html, body
   {
        padding: 0;
        margin: 0;
        height: 100%;
        min-height: 100%;
        background: white;
    }



    div 
    {
        width: 50%;
        height: 50%;
        border: 1px solid black;
        margin: 0px -1px;
    }

    .pull-left 
    {
        float: left;
    }

    .pull-right 
    {
        float: right;
    }
   </style>
</head>
<body>
    <form runat="server">

    <div class="aqua pull-left"></div>

    <div class="blue pull-right" ></div>

    <div class="green pull-left bottom"></div>

    <div class="tan pull-right bottom"></div>

    </form>
</body>

html,正文
{
填充:0;
保证金:0;
身高:100%;
最小高度:100%;
背景:白色;
}
div
{
宽度:50%;
身高:50%;
边框:1px纯黑;
利润率:0px-1px;
}
.向左拉
{
浮动:左;
}
.向右拉
{
浮动:对;
}

您只需指定长方体的大小,为它们指定正确的大小,然后将它们向左浮动即可

*{
框大小:边框框;
}
html,
身体,
形式{
保证金:0;
填充:0;
宽度:100%;
身高:100%;
}
.盒子{
宽度:50%;
身高:50%;
边框:1px纯黑;
浮动:左;
}
//clearfix
.box:最后一个子项::之后{
显示:表格;
内容:'';
明确:两者皆有;
}


谢谢您的回复。我试过你的代码。当我在div上面添加表单标签时,这个4象限布局就消失了。为什么你需要将它包装在表单中?这是一个asp.net应用程序,我需要将数据发回服务器。这就是我需要表单标签的原因。我计划在使用表单编辑的每个分区中添加一些telerik图表,您只需将其高度和宽度设置为100%