第二天在我的网站上工作。到目前为止，它看起来还不错，但是当我改变网站的大小时（通过鼠标滚动），不同项目中的文本段落相互重叠。它看起来不漂亮，该怎么办？ 另外，我是否做了正确的事情，将三个第一段作为一个网格，两个作为第二个网格？我希望第四段在前两列的宽度上。有没有更简单的方法来清理代码？
body {
background-color: #ffffff;
margin: 0px;
display: grid;
}
ul {
list-style-type: none;
margin: 0;
padding: 20px;
padding-bottom: 40px;
overflow: hidden;
background-color: #e6e6e6;
text-align: right;
color: #dfbf9f;
}
li {
display: inline-block;
}
li a {
display: block;
color: #999999;
text-align: center;
padding: 14px 30px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
}
li a:hover {
border-radius: 10px;
background-color: #d9d9d9;
}
li a:visited {
background-color: #d9d9d9 !important;
}
.welcome {
background: linear-gradient(to bottom, #01aef0 45%, #0090d7 100%);
padding: 50px;
margin: 0px;
padding-top: 20px;
}
h1 {
color: #ffffff;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
font-size: 5em;
-webkit-margin-start: 15px;
-webkit-margin-end: 15px;
font-family: 'Crimson Text', serif;
letter-spacing: 5px;
}
h2 {
margin: 0;
color: #000000;
font-style: italic;
font-size: 2em;
font-family: 'Ramajana', serif;
}
#lorem {
color: #80dfff !important;
-webkit-margin-start: 15px;
-webkit-margin-end: 15px;
-webkit-margin-before: -15px;
-webkit-margin-after: 10px;
font-family: 'Crimson Text', serif;
font-weight:300;
}
.grid {
display: grid;
height: 300px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-row-gap: 50px;
grid-column-gap: 20px;
padding: 0px;
margin-left: 100px;
margin-right: 100px;
margin-top: 75px;
font-family: 'Ramajana', serif;
}
.description {
font-size: 18px;
color: #808080;
}
#title {
font-size: 3em;
font-weight: 600;
font-family: 'Ramajana', serif;
}
.ostatnie {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
grid-column-gap: 40px;
padding: 0px;
margin-left: 100px;
margin-right: 100px;
margin-top: 30px;
}
footer {
background-color: #e6e6e6;
text-align: left;
padding: 10px;
padding-left: 40px;
margin-bottom: 20px;
display: inline-block;
word-spacing: 50px;
width: 100%;
height: 50%;
}
ol {
padding-left: 10px;
}<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:600,600i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ramaraja" rel="stylesheet">
<title>Welcome</title>
</head>
<body>
<div class="topnav">
<ul>
<li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
<li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
<li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
<li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
<li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
<li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
<li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
</ul>
</div>
<div class="welcome">
<header>
<h1><em>welcome</em></h1>
<h2 id="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
</header>
</div>
<div class="grid">
<div id="t1">
<h2 id="title"><em>Who Are We?</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t2">
<h2 id="title"><em>What We Do?</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t3">
<h2 id="title"><em>Latest Projects</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="ostatnie">
<div id="t4">
<h2 id="title"><em>Some Title</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged <a href="https://templated.co/">Website CSS Templates</a>. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t5">
<h2 id="title"><em>Some Title</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown <a href="https://templated.co/">Website CSS Templates</a> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typeset</p>
</div>
</div>
<footer>
<ol>
<li>home</li>
<li>about us</li>
<li>services</li>
<li>solutions</li>
<li>support</li>
<li>partners</li>
<li>contact</li>
</ol>
</footer>
</body>
答案 0 :(得分：0)
您可能希望从css代码.grid中删除这两行，以获得所需的结果。
height: 300px;
grid-template-rows: 1fr 1fr 1fr;
你的新css应该是这样的
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 50px;
grid-column-gap: 20px;
padding: 0px;
margin-left: 100px;
margin-right: 100px;
margin-top: 75px;
font-family: 'Ramajana', serif;
}