html - 网格 : Two areas are not coming side by side-6ren

html - 网格 : Two areas are not coming side by side

转载作者：太空宇宙更新时间：2023-11-04 06:41:12

我只是想像这样并排放置两个区域:

但我得到这个:

我通过查看 w3schools 来理解网格，我尝试做他们的示例，但我仍然无法理解，我也不知道为什么。有人可以帮我解决这个问题，也可以粗略地向我解释一下网格。我尝试观看 Youtube 视频，我几乎明白了，例如，我知道它与 html 中的表格的概念相同。

还有下面的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
        body {
        display:grid;
        grid-template: 1fr 2fr;
        grid-gap: 20px 20px 20px 20px;
        }
        table,td,th {
            border: 1px solid black;
            border-collapse:collapse;
        }
        th {
            background-color:black;
            color:white;
            font-family:verdana;
        }
        .time {
            background-color:#D3D3D3
        }
        .button {
            border:0;
            background:transparent;
            text-decoration: underline;
            font-weight:bold;
            cursor:pointer;
        }
        td {
            font-family:Calibri;
        }
        table {
            display:inline-block;
        }
        form {
            display:inline-block;
            float:right;
        }
        </style>
    </head>
<body>
    <header>
        <h1> Soccer Camp Registration</h1>
    </header>
<div class="gridcontainer">
    <colgroup>
        <col class="times">
        <colspan = "7">
    </colgroup>
    <div class="tables">
    <table>
        <tr class="days">
            <th></th>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
        <tr>
            <td class="time">9:00 am-10:30am</td>
            <td>Free Time</td>
            <td rowspan="3">Technical Skills</td>
            <td colspan="4">Training Session</td>
            <td>Free Time</td>
        </tr>
        <tr>
            <td class="time">10:30 am-12:00pm</td>
            <td rowspan="3">Round Robin Games</td>
            <td colspan="3" rowspan="2">Dribbling</td>
            <td rowspan="2">Game Analysis</td>
            <td> Agility</td>
        </tr>
        <tr>
            <td class="time">1:00pm-2:30pm</td>
            <td>Strength Training</td>
        </tr>
        <tr>
            <td class="time">2:30pm-5:00pm</td>
            <td colspan="3">Nutrition</td>
            <td>Passing and Receiving</td>
            <td colspan="2" rowspan="2">Campers Choice</td>
        </tr>
        <tr>
            <td class="time">6:00pm-8:00pm</td>
            <td colspan="5"> Night Games</td>
        </tr>
    </table>
    </div>
    <caption>July 2017 Weekly Schedule</caption>
    <div class="forms">
    <form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
        <h2> Request Camp Information</h2>
        <fieldset class="camplc">
            <legend for="camplc"> Camper Location</legend>
            <label for="province"> Province</label>
            <select name="province" id="province">
                <option value="BC"> British Columbia</option>
                <option value="ON" >Ontario</option>
                <option value="AB" >ALberta</option>
                <option value="QC" >Quebec</option>
                <option value="YK" > Yukon</option>
            </select>
        </fieldset>
        <fieldset class="campid">
            <legend for="campid"> Camper Identification</legend>
            <label for="firstname"> First Name</label>
            <input type="text" name="firstname" id="fn">
            <br>
            <label for="lastname">Last Name</label>
            <input type="text" name="lastname" id="ln"> 
            <br>
            <label for="Gender">Gender</label>
            <input type="radio" name="Gender" value="male" id="male">
                <label for="male"> Male</label>
            <input type="radio" name="Gender" value="female" id="female">
                <label for="female">Female</label>
            <br>
            <label for="email">Email</label>
            <input type="text" name="email" id="email" placeholder="name@example.com">
            <br>
            <label for="age">Camper Age</label>
            <select name="age" form="age">
                <option value="8">8-9</option>
                <option value="10" >10-12</option>
                <option value="13" >13-15</option>
                <option value="16" >16-19</option>
            </select>
        </fieldset>
        <fieldset class="info">
            <legend for="info"> Please Send me information about</legend>
            <input type="checkbox" name="infoa" value="Camp Dates" id="cd">
            <label for="campdates"> Camp Dates</label>
            <br>
            <input type="checkbox" name="infoa" value="Camp Fees" id="cf">
            <label for="campdates"> Camp Fees</label>
            <br>
            <input type="checkbox" name="infoa" value="Transportation" id="tn">
            <label for="campdates">Transportation</label>
        </fieldset>
        <fieldset class="questions">
            <legend for="questions"> Question?</legend>
            <textarea placeholder="Please enter any questions or comments here" rows ="5" cols="50"></textarea>
        </fieldset>
        <input type="submit" value="Request Info" class="button">
        <input type="reset" value="Clear Form" class="button">
    </form>
    </div>
</div>  
</body>
</html>

最佳答案

试试这个代码，这与您提供的图片完全一样，希望它对您有用。

   body {
/*     display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr; */
}
header { text-align: center;}
table,td,th {
  border: 1px solid black;
  border-collapse: collapse;
}
th {
  background-color: black;
  color: white;
  font-family: verdana;
  padding: 25px 67px;
}
.time { background-color:#D3D3D3 }
.button {
  border: 0;
  background:transparent;
  text-decoration: underline;
  font-weight:bold;
  cursor: pointer;
}
td {
  font-family: Calibri;
  border: 1px solid #ccc;
  padding: 20px;
}
table { display: inline-block; }
form {
  display: inline-block;
  border: 2px solid #262626;
  /* float:right; */
}
.gridcontainer{
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    border: 2px solid #262626;
}
fieldset.camplc { padding: 20px 100px; }
fieldset.campid { padding: 10px 90px; }
fieldset.info { padding: 10px 85px; }
fieldset.questions { padding: 10px 90px; }

   <header>
        <h1> Soccer Camp Registration</h1>
    </header>
<div class="gridcontainer">
    <colgroup>
        <col class="times">
        <colspan = "6">
<!--     </colgroup> -->
    <div class="tables">
    <table>
        <tr class="days">
            <th></th>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
        <tr>
            <td class="time">9:00 am-10:30am</td>
            <td>Free Time</td>
            <td rowspan="3">Technical Skills</td>
            <td colspan="4">Training Session</td>
            <td>Free Time</td>
        </tr>
        <tr>
            <td class="time">10:30 am-12:00pm</td>
            <td rowspan="3">Round Robin Games</td>
            <td colspan="3" rowspan="2">Dribbling</td>
            <td rowspan="2">Game Analysis</td>
            <td> Agility</td>
        </tr>
        <tr>
            <td class="time">1:00pm-2:30pm</td>
            <td>Strength Training</td>
        </tr>
        <tr>
            <td class="time">2:30pm-5:00pm</td>
            <td colspan="3">Nutrition</td>
            <td>Passing and Receiving</td>
            <td colspan="2" rowspan="2">Campers Choice</td>
        </tr>
        <tr>
            <td class="time">6:00pm-8:00pm</td>
            <td colspan="5"> Night Games</td>
        </tr>
    </table>
    </div>
      
    <caption>July 2017 Weekly Schedule</caption>
         </colspan>
     </colgroup>
   
<!-- <!--     <colgroup> -->
        <col class="times"> 
        <colspan = "4">
    </colgroup>
    <div class="forms">
    <form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
        <h2> Request Camp Information</h2>
        <fieldset class="camplc">
            <legend for="camplc"> Camper Location</legend>
            <label for="province"> Province</label>
            <select name="province" id="province">
                <option value="BC"> British Columbia</option>
                <option value="ON" >Ontario</option>
                <option value="AB" >ALberta</option>
                <option value="QC" >Quebec</option>
                <option value="YK" > Yukon</option>
            </select>
        </fieldset>
        <fieldset class="campid">
            <legend for="campid"> Camper Identification</legend>
            <label for="firstname"> First Name</label>
            <input type="text" name="firstname" id="fn">
            <br>
            <label for="lastname">Last Name</label>
            <input type="text" name="lastname" id="ln"> 
            <br>
            <label for="Gender">Gender</label>
            <input type="radio" name="Gender" value="male" id="male">
                <label for="male"> Male</label>
            <input type="radio" name="Gender" value="female" id="female">
                <label for="female">Female</label>
            <br>
            <label for="email">Email</label>
            <input type="text" name="email" id="email" placeholder="name@example.com">
            <br>
            <label for="age">Camper Age</label>
            <select name="age" form="age">
                <option value="8">8-9</option>
                <option value="10" >10-12</option>
                <option value="13" >13-15</option>
                <option value="16" >16-19</option>
            </select>
        </fieldset>
        <fieldset class="info">
            <legend for="info"> Please Send me information about</legend>
            <input type="checkbox" name="infoa" value="Camp Dates" id="cd">
            <label for="campdates"> Camp Dates</label>
            <br>
            <input type="checkbox" name="infoa" value="Camp Fees" id="cf">
            <label for="campdates"> Camp Fees</label>
            <br>
            <input type="checkbox" name="infoa" value="Transportation" id="tn">
            <label for="campdates">Transportation</label>
        </fieldset>
        <fieldset class="questions">
            <legend for="questions"> Question?</legend>
            <textarea placeholder="Please enter any questions or comments here" rows ="5" cols="50"></textarea>
        </fieldset>
        <input type="submit" value="Request Info" class="button">
        <input type="reset" value="Clear Form" class="button">
    </form>
    </div>
   </div>

关于html - 网格 : Two areas are not coming side by side，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53754635/

文章推荐： javascript - 在 Python 中处理 SVG

文章推荐： java - 粘贴菜单项，附加到 JTextField 时不执行任何操作

文章推荐： java - 实例化 java.io.File 以从类路径读取资源

PHP 引荐来源网址 : How to make sure a request is actually coming from where it's supposed to come from
我想在其他“已批准”域上放一个指向我网站的链接。当他们单击链接时，它会转到一个页面，该页面会检查引荐来源网址 ($_SERVER['HTTP_REFERRER']) 以确保它们来自已获准拥有我的链接的
python - 类型错误 : first argument must be callable or None - error is not coming first time but coming later
我用这一行创建一个 defaultdict 并使用列表作为值对其进行初始化。 page_by_due_date = defaultdict(list) due_pages_list = [] for
Java内存: where are the references coming from?
我有一个使用大量内存的 Java 程序。我使用 jmap -histo:live 来追踪正在使用所有内存的对象。只有几种类型占用了大部分内存，其中超过 1M，但我无法判断引用的来源来自。有什么方法可
Java ClassCastException : How Come?
我正在尝试使用 Android 电话管理器结束调用(新的调用筛选 API 不适合我)。我在网上找到了很多例子，都与我下面的代码非常相似。它编译得很好，但我在运行时遇到了 ClassCastExcept
c++ - 资源编辑器中的dll资源: Where do they come from?
我有一个用 Visual Studio 编写的小型 C++ dll(当然)。在解决方案代码中，我有一个仅包含版本信息的资源文件。奇怪的是，当我将已编译的 dll 分片到 Visual Studio
c# - 装箱和拆箱 : when does it come up?
所以我明白了什么是装箱和拆箱。它什么时候出现在现实世界的代码中，或者在什么例子中它是一个问题？我无法想象做这样的事情: int i = 123; object o = i; //
.net - 为什么我们激活它时Word没有 "come to front"？
我们的 winforms 应用程序与 MS Word 交互，我们在生成文档并希望在应用程序前面的 Word 中显示它时运行此代码: [setup w as a Word interop object]
windows-8 - Charles错误报告: How to over come it?
我最近已从Mac开发环境切换到Windows开发环境。我广泛用于Chrles代理来捕获网络流量，请求和响应详细信息。现在，我已经在Windows 8中安装了Charles Proxy 3.7版。但是，
javascript - zf2 工具提示中的表单消息 : where does it come from?
假设我有一个带有电子邮件表单元素的表单；例如，当我在此字段中输入 1 个字母并按“确定”时，我会在工具提示中收到一条用我的语言(法语)显示的消息:“Veuillez saisir une adress
xcode - firebase_messaging : no notifications coming through
解释问题: 我现在已经尝试让 firebase_messaging 工作近一周。我成功设置了一个旧版 Xcode APNS 应用程序，该应用程序在生成所有新证书等后工作。但是使用 firebase
nhibernate - 数据库建模或数据库设计: Which comes first?
我想知道域实现的常见做法是什么。首先设计需要持久性或数据库模式的业务对象，然后从实体关系图(然后是 ORM poco*)生成它？我要开始一个解决方案，但我想知道哪个是最优选的“模式”。 (*由 NH
javascript - : "describe" and "it" coming from?的话从哪里来
我看到一个用 Node.js 构建的应用程序，但我不明白 describe 和 it 这两个词如何可用？在浏览器控制台中，它是一个函数，describe 抛出一个ReferenceError。我
javascript - : "describe" and "it" coming from?的话从哪里来
我看到一个用 Node.js 构建的应用程序，但我不明白 describe 和 it 这两个词如何可用？在浏览器控制台中，它是一个函数，describe 抛出一个ReferenceError。我
python - Django教程: where does question_id come from?
所以我正在尝试学习 django 并遵循本教程:https://docs.djangoproject.com/en/1.10/intro/tutorial01/ 按照教程制作民意调查应用程序后，当我回
java - OpenGL 工件 : where do they come from?
故事我已经在 OpenGL 中编码大约一年了(在相同的硬件上)，我最近才得到像上图中那样的工件。它们在短时间内(几分钟)连续运行我的程序后出现，并出现在任何地方:从写字板(见图片)到我的桌面和任务栏
javascript - 正则表达式.test() : where does it come from?
我对下面名为test(第 3 行)的函数的使用感到好奇: var pattern = /[1-9][1-9]{5}/; var str = 'this is 248760!'; alert(patte
php - 事件记录 WHERE 子句中的额外连接词 : Where are they coming from?
当我正在使用的 CodeIgniter 应用程序尝试特定的 UPDATE 操作时，我收到一个非常奇怪的数据库错误。 Active Record 调用是: $this->db->update('eval
javascript - 如何使图像 "coming"成为前景
我的目标是显示一张图片并将其慢慢带到前台(并在主要时间内延长)。我希望当我在 div/img 上检测到事件 onmouseover 时可以完成此操作。目前，我使用隐藏属性，但我不喜欢它，因为它就像:
c# - QueryString containing\coming through with\\
我有一个页面，我通过查询字符串发送了一个参数。如果我使用 Request.QueryString["Format"] 检索它，我会遇到类型 'CD\DVD' 的问题。它作为“CD\\DVD”返回。重
android - 滚动时ListView "coming back"
我在 ListView 中遇到了一个奇怪的行为，只有一个 ListView，我的应用程序中有很多 ListView，但只有在这种情况下才会发生。我会试着解释一下，当我滚动到底部时，好吧，滚动会停止。

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 网格 : Two areas are not coming side by side