个人中心
gpt4 book ai didi

html - 将屏幕分成 4 个象限，每个象限都有边框，不适用于表单标签

转载 作者：太空宇宙 更新时间：2023-11-04 03:03:50 25 4
gpt4 key购买 nike

我想把一个网页分成 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>

最佳答案

你只需要指定 box-sizing ，给它们合适的尺寸，然后让它们向左浮动。

* {
  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>

关于html - 将屏幕分成 4 个象限，每个象限都有边框，不适用于表单标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30849198/

25 4 0
文章推荐： CSS超链接样式
文章推荐： 无需专用函数即可将纪元时间转换为人类可读
文章推荐： c - 从 X509 结构打开 SSL 提取证书到 char 数组
文章推荐： css - 使用 时突出显示 div
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com