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 以从类路径读取资源

javascript - d3(幕后)-area.style.append 有效，而 area.style + area.append 无效。为什么？
你好，我有一个关于 d3 的性质的问题，我认为这是关于 d3 的非常深入的细节。据我了解， d3 中的变量声明，如 var svg = d3.select('boby').append('svg'
Java 反射调用重载方法 Area.equals(Area)
如 this question 中所述，java.awt.geom.Area的equals方法定义为 public boolean equals(Area other) 而不是覆盖 Object 中的
html - CSS 网格 : How to make an area always on top of another area
我希望红色区域始终适合内容，以便下方区域(评论部分)始终紧随其后而不是下方。在 chrome 中，它有效，但在 Firefox 中无效(见图片)。我认为通过添加 grid-template-row
r - ggplot : Fill small area under normal curve: remove "joining" area
我想在曲线下填充一小块区域。但是，带状几何图形将分布的两个“部分”连接起来。 library(tidyverse) density(rnorm(1000, 0, 1)) %$% data.fram
html - 空格后的方 block (标签 : -Area-Undefined Area-WebKit WebKit-Fonts)
我在 chrome 中得到一个奇怪的行为，它在空白 IE 之后创建正方形 Price: 123234 但这毕竟不是网站上的所有空格，只是在我得到两个字符串如 Price: 然后在我的代码中添加价格的情
CSS 翻转 : how to maintain "hit area" size when hidden image is larger than anchor area
我有一个小问题，我不认为我想做的事情可以只用纯 CSS 来实现，但我想我还是要问。基本上，我有一个 DIV，其中包含一个超链接元素，该元素的大小小于其父 DIV。所以实际上我在一个正方形中有一个正方
html - CSS 网格 : `grid-template-areas` — empty area using period not working
我正在尝试将元素放置到一个简单的 9x9 网格中，但是当我尝试将元素放置在左下角或右下角时，它们并没有停留在那里，而是在它们应该放置的位置上方的一个方框内结束。 Here's a JSFiddle s
html - CSS 网格 : grid-row/column-start/end VS grid-area + grid-template-area
我一直在阅读 CSS Grid tutorial在 CSS Tricks 中，但一个基本方面让我有点困惑。似乎有两种方法可以决定一个网格元素跨越多少个单元格: grid-template-area使
r - 尝试使用 mgcv::gam "mismatch between nb/polys supplied area names and data area names"评估马尔可夫随机场时出错
我试图实现这个 great blog Gavin Simpson 使用从 cancensus 包下载的数据发布，但在尝试评估 gam 时出现以下错误: Error in smooth.construc
javascript - HTML5 : Whenever I send a text area message to fill out the body of an email the name of the text area proceeds it. 如何修复此问题？
基本上，每当我发送文本区域消息来填写电子邮件正文时，该文本区域的名称总是会继续。因此，例如，如果我在文本区域中输入“Hello World”，然后按发送，我的电子邮件应用程序将打开，正文显示:“mes
pytorch - 'area' 的上采样方法是干什么用的？
PyTorch 函数 torch.nn.functional.interpolate包含多种上采样模式，例如:nearest , linear , bilinear , bicubic , trili
javascript - 在第一个内容的基础上扩展side area
我正在尝试使用 jQuery 根据另一个区域的高度扩展一个区域。但是，第一个区域是动态内容，所以我不能像在 JS 代码中那样设置固定值(第 6 行，高度为 175px)。我这里有一个例子:https
matlab - area() 绘图覆盖绘图轴
我在 MATLAB 中创建一个图形，然后对图形的背景进行着色以突出显示区域。这方面的一个例子如下: clc; clear all; hFig = figure; y = [0:0.1:2*pi]; x
c# - 路由映射不适用于 "area"
我读了很多关于这个问题的资料，但我想不通。路由和 ASP .NET MVC 的一切都非常简单，但我仍然坚持这一点。问题是我正在尝试使用这种形式对给定的 url 进行 GET: {区域}/{ Con
223. Rectangle Area 矩形面积
题目地址: https://leetcode.com/problems/rectangle-area/description/ 题目描述： Find the total area covered
wpf - 控件的 "visible area"？
我在ScrollViewer中有一个Canvas。 Canvas 的尺寸为600x600，而ScrollViewer 400x400。如果我滚动到右侧，则看不到Canvas左侧的200pxl。因此，我
iPhone动画: how do I animate the filling up of an area?
考虑一个圆。现在考虑从圆心向右绘制的圆半径。现在想象半径绕圆心旋转，旋转时扫过一个区域。我的问题是:当半径从 0 度旋转到围绕圆的任何选定的度数时，我想使用 iPhone 的动画技术用与圆的背景区域不
Xcode IB : Inexplicable area?
我想知道是否有人知道为什么 IB 在奇怪的 Nib 上到处都有莫名其妙的高亮区域.. 下面是一个例子: 我的意思是我用红色标记的区域内的亮区... 分割 View 下方没有 View ，没有与之对应的
ios - 添加约束时缺少自动布局 "Safe Area"
我是 IOS 应用程序开发的新手，目前正在学习 Auto Layout。有时，当我添加约束时，“安全区域”会丢失。我正在尝试为我的 StackView 添加约束，其中 0、0、0、0 用于相对于“
ios - UIButtonTypeInfoDark Touch Area
我添加了 UIButton类型为 UIButtonTypeInfoDark到一个 View 和它的触摸区域是巨大的。我知道 Apple 推荐 44px，但在这种情况下，它要大一些。我为 View 设置

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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