网格：两个区域并排不在一起
我只是想像这样将两个区域并排放置在一起：
但是我得到了：
我了解网格就像通过浏览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>
2 个答案:
答案 0 :(得分：1)
尝试此代码，就像您给图片赋予的希望一样。
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>
答案 1 :(得分：0)
阅读文档并认真遵循教程。甚至W3schools也有关于CSS网格的不错的教程。当我刚学习CSS网格时，这也是我的起点。因此，您似乎并没有按照自己的意愿去关注他们的教程或其他教程，因为您做了我认为这些教程会教您不要做的事情。现在，让我们分解一下我的意思。
首先，存在CSS网格的原因并不是让您仍然在已经定位或想要使用display: inline-block定位的元素上使用float或display: grid;。我说的是这一行：
table {
display:inline-block;
}
form {
display:inline-block;
float:right;
}
您在表单和表上使用了inline-block和float，这是您尝试使用display-grid定位的元素。那不是目标。您需要坚持。要么仅将它们放置在显示网格中，要么使用显示行内块。即使您并没有真正给它们提供显示网格，但是这些元素都是相同的，您最终会在给他们显示后将其分配给grid-area属性：grid给他们的父母。
话虽如此，以下是更改：
首先，我将它们注释掉，然后使用它们的包装div定位它们。包装div是指您用class ="forms"和class="tables"创建的div。另外，我没有将display:grid赋予正文，而是给了您创建并再次使用的gridcontainer div。
最后，我还将表div外部的标题放在表div的内部，因为必须在表标签之后立即插入标题标签。简而言之，将下面的代码与您必须了解的代码进行比较，然后再观看和阅读教程。甚至您提到的w3schools都是您从中学习css网格的源代码，也足以说明您完成所需的任务。而且不要就此停下来。还要继续学习其他教程，并祝您编程愉快。这是工作代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.gridcontainer {
display:grid;
grid-template-areas: 'schedule info-table';
/*
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;
}
*/
.tables {
grid-area: schedule;
}
.forms {
grid-area: info-table;
border: 2px solid black;
height: 80vh;
}
table {
height: 70vh;
width: 100%;
}
h1 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
caption {
display: block;
border-bottom: 1px solid black;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1> Soccer Camp Registration</h1>
</header>
<div class="gridcontainer">
<!--Did not understand why you need this, so I just commented it out. Also,
the colspan was throwing sintax errors. Check it!!!!-->
<!--
<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>
<caption>July 2017 Weekly Schedule</caption>
</div>
<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>
这是在Codepen上的代码的有效链接：https://codepen.io/anon/pen/GPpXWM
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？