Html 将屏幕分为4个象限,每个象限周围有边框,不使用表单标记
我试图把一个网页分成4个象限。我从这个网站上得到了以下代码。只要不添加表单标记,它就可以工作。我要表格标签。如何使用以下代码实现4象限区域 我不擅长css。请帮忙 这是我的密码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
<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%