我制作了几个html页面，当使用<section>标记将它们全部堆叠到主html页面(index.html(时，文本对齐和它们的位置变得一团糟。但是这些页面运行得非常好，而我单独运行它们。我认为CSS造成了这个问题，我试图找出问题，但没能找到。我已经给出了下面的所有代码。我需要帮助。提前谢谢。
body, html{
height: 100%;
margin: 0 ;
padding:0;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
a {
color: black;
text-decoration: none;
}
body{
background: url("background0.jpg") no-repeat;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: right top;
}
#background {
position: absolute;
top: 100%;
}
.logo{
float:left;
margin-top: 15px;
margin-left: 50px;
}
nav{
padding: 15px 0px;
width: 100%;
}
ul{
padding: 0;
position: relative;
list-style-type: none;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: 550;
}
ul li {
display: inline-block;
/* added this line for child absolute positioning */
position: relative;
padding: 5px 5px;
color: black;
margin: 0px 0px 0px 1px;
}
.home{
padding: 4px 15px;
text-align: center;
cursor: pointer;
outline: none;
background-color: transparent;
border: none;
border-radius: 18px;
}
.home:hover{
background-color: #cce0ff;
}
.events{
padding: 4px 15px;
text-align: center;
cursor: pointer;
outline: none;
background-color: transparent;
border: none;
border-radius: 18px;
}
.events:hover{
background-color: #cce0ff;
}
.activities{
padding: 4px 15px;
text-align: center;
cursor: pointer;
outline: none;
background-color: transparent;
border: none;
border-radius: 18px;
}
.activities:hover{
background-color: #cce0ff;
}
.contact{
padding: 4px 15px;
text-align: center;
cursor: pointer;
outline: none;
background-color: transparent;
border: none;
border-radius: 18px;
}
.contact:hover{
background-color: #cce0ff;
}
.panel{
padding: 4px 15px;
text-align: center;
cursor: pointer;
outline: none;
background-color: transparent;
border: none;
border-radius: 18px;
}
.panel:hover{
background-color: #cce0ff;
}
ul li ul {
position: absolute;
background: whitesmoke;
visibility: hidden;
opacity: 0;
min-width: 5rem;
transition: all 0.5s ease;
left: 0;
/* same as li height so that there is no space between Panel and the ul to preserve hover */
top: 1.75rem;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 10px;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
/* dropdown */
margin: 10px 24px;
margin-left: 20px;
}
.covid{
display: inline-block;
padding: 4px 10px;
/* background:#7ac2ff; */
background: #12c2e9; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #c471ed, #f64f59); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #c471ed, #f64f59); /* W3C, IE 10+/ Edge, Firefox 16+,
Chrome 26+, Opera 12+, Safari 7+ */
margin-top: -25%;
text-decoration: none;
color:black;
transition: 0.2s;
border-radius: 18px;
font-family: Arial, Helvetica, sans-serif;
}
.container {
text-align: left;
width: 60%;
margin: 140px 90px;
}
h1{
font-size: 3.2em;
font-weight: 750;
}
.container p{
font-size: 1.3em;
line-height: 1.4em;
}
.container a
{
display: inline-block;
font-size: 1em;
background:#7ac2ff;
padding: 10px 30px;
/* text-transform: uppercase; */
text-decoration: none;
font-weight: 650;
margin-top: 10px;
color:black;
letter-spacing: 0px;
transition: 0.2s;
border-radius: 18px;
font-family: Arial, Helvetica, sans-serif;
}
.container a:hover{
letter-spacing: 6px;
}
#section{
background-size: auto 100%;
position: absolute;
/* overflow: scroll; */
/* display: inline; */
/* display: inline-table; */
/* min-height:500px; */
/* display: block; */
/* overflow: hidden; */
}
img{
max-width: 100%;
max-height: 100%;
}
.s-history img{
float:left;
height: 400px ;
width: 450px;
margin-top: 130px;
margin-left: 50px;
}
.s-container {
text-align: left;
width: 40%; /* Set the width of the positioned div */
display: inline-block;
background: whitesmoke;
/* box */
padding-top: 50px;
padding-right: 70px;
padding-bottom: 50px;
padding-left: 70px;
text-decoration: none;
/* text position */
position: absolute;
margin-top: 50px;
margin-left: 140px;
margin-bottom: 50px;
margin-right: 50px;
color:black;
letter-spacing: 0px;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
font-family: Arial, Helvetica, sans-serif;
}
.s-container h1{
font-size: 2.5em;
font-weight: 750;
}
.s-container p{
font-size: 0.9em;
line-height: 1.4em;
}
.ac-container {
text-align: left;
display: inline-block;
text-decoration: none;
/* text position */
position: absolute;
margin-top: 10px;
margin-left: 70px;
margin-bottom: 60px;
margin-right: 70px;
color:black;
letter-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.ac-container h1{
font-size: 2.5em;
font-weight: 750;
}
.ac-container p{
font-size: 0.9em;
line-height: 1.4em;
font-weight: 550;
}
/* puts full image in a certain position */
img{
max-width: 100%;
max-height: 100%;
border-radius: 10px;
display: block;
}
.ml-container{
float:left;
height: 250px ;
width: 450px;
margin-top: 180px;
margin-left: 70px;
text-align: left;
background: whitesmoke;
/* box */
padding-top: 0px;
padding-right: 395px;
padding-bottom: 0px;
padding-left: 0px;
text-decoration: none;
color:black;
letter-spacing: 0px;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
font-family: Arial, Helvetica, sans-serif;
}
.ml-container h2{
font-size: 2.3em;
font-weight: 450;
position: absolute;
margin-top: -230px;
margin-left: 360px;
margin-bottom: 60px;
margin-right: 70px;
}
.ml-container p{
font-size: 0.9em;
line-height: 1.4em;
position: absolute;
margin-top: -170px;
margin-left: 360px;
margin-right: 470px;
margin-bottom: 60px;
}
.ml-container a{
display: inline-block;
font-size: 0.9em;
background:#7ac2ff;
padding: 5px 15px;
text-decoration: none;
font-weight: 550;
/* margin-top: 10px; */
color:black;
letter-spacing: 0px;
transition: 0.2s;
border-radius: 18px;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
margin-top: -90px;
margin-left: 360px;
margin-right: 470px;
margin-bottom: 60px;
}
.cad-container{
float:right;
height: 200px ;
width: 290px;
margin-top: 180px;
margin-right: 90px;
text-align: left;
background: whitesmoke;
/* box */
padding-top: 0px;
padding-bottom: 180px;
padding-right: 0%;
padding-left: 0px;
text-decoration: none;
color:black;
letter-spacing: 0px;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
font-family: Arial, Helvetica, sans-serif;
}
.cad-container h2{
font-size: 1.5em;
font-weight: 500;
position: absolute;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 160px;
margin-right: 40px;
}
.cad-container p{
font-size: 0.9em;
line-height: 1.4em;
position: absolute;
margin-top: 70px;
margin-left: 10px;
margin-right: 40px;
margin-bottom: 60px;
}
.cad-container a{
display: inline-block;
font-size: 0.9em;
background:#7ac2ff;
padding: 5px 15px;
text-decoration: none;
font-weight: 550;
/* margin-top: 10px; */
color:black;
letter-spacing: 0px;
transition: 0.2s;
border-radius: 18px;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
margin-top: 125px;
margin-left: 10px;
margin-right: 70px;
margin-bottom: 60px;
}
.more-text{
text-align: left;
/* display: inline-block; */
text-decoration: none;
/* text position */
position: absolute;
margin-top: 470px;
margin-left: 70px;
margin-bottom: 80px;
margin-right: 250px;
color:black;
letter-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.more-text p{
font-size: 1.2em;
line-height: 1.4em;
font-weight: 550;
}
.more-text a
{
display: inline-block;
font-size: 1em;
background:#7ac2ff;
padding: 10px 30px;
text-decoration: none;
font-weight: 650;
margin-top: 7px;
color:black;
letter-spacing: 0px;
transition: 0.2s;
border-radius: 18px;
font-family: Arial, Helvetica, sans-serif;
}
.more-text a:hover{
letter-spacing: 2px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo project</title>
<link rel = "icon" type = "image/png" href = "clubicon.png">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- <header> -->
<div class="navbar">
<div class="logo">
<a href="index.html">
<img src="logo1.png">
<img src="logo2.gif">
</a>
</div>
<nav>
<ul>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="#" class="events">News & Events</a></li>
<li><a href="#" class="activities">Activities</a></li>
<li><a href="#" class="panel">Panel</a>
<ul class="dropdown">
<li><a href="#">2021</a></li>
<li><a href="#">2020</a></li>
</ul>
</li>
<li><a href="#" class="contact">Contact Us</a></li>
<li><a href="covid.html" class="covid">About COVID19 </a></li>
</ul>
</nav>
</div>
<div class="container">
<h1>This is a demo text </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>
<a href="membership.html">Join us</a>
</div>
<!-- </header> -->
<section id="history">
<div class="s-history">
<img src="Looking_history.png">
</div>
<div class="s-container">
<h1>Have a Look on Our History </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse .</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="activities">
<div class="ac-container">
<h1>Our Club Activities</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>
</div>
<div class="ml-container">
<img src="ML .jpg">
<h2>Machine Learning</h2>
<p> Our club members trained a neural network of a dataset containing pictures of x-ray,
classified into two categories. Pneumonia and Normal. They also developed.....</p>
<a href="">Read More</a>
</div>
<div class="cad-container">
<img src="cad.jpg">
<h2>CAD(Computer Aided
<br>Design)</h2>
<p>Here are some designs we did for both <br>learning purposes and as projects.....</p>
<a href="#">Read More</a>
</div>
<div class="more-text">
<p>If you want to see more activities of our club, you can
press the link below.
</p>
<a href="#">See More Activities</a>
</div>
</section>
</body>
</html>我还没有查看所有内容，但从我可以看出，您的问题是使用该属性：position: absolute;在你的部分中的几个地方，尝试停用它们以查看更完整的结果，然后调整你的部分。
.ac-container {
text-align: left;
display: inline-block;
text-decoration: none;
position: absolute;
margin-top: 10px;
margin-left: 70px;
margin-bottom: 60px;
margin-right: 70px;
color: black;
letter-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
}在上面的CSS部分中，只需删除position:absolute，它就会正常工作。