我正在尝试将网页划分为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>
答案 0 :(得分:2)
您只需要指定框大小,给它们正确的大小并将它们浮动到左侧。
* {
box-sizing: border-box;
}
html,
body,
form {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.box {
width: 50%;
height: 50%;
border: 1px solid black;
float: left;
}
//clearfix
.box:last-child::after {
display: table;
content: '';
clear: both;
}
<form>
<div class="aqua box"></div>
<div class="blue box"></div>
<div class="green box"></div>
<div class="tan box"></div>
</form>