我只是想像这样并排放置两个区域:
但我得到这个:
我通过查看 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/