我似乎无法让我的第 4 部分与其他部分保持一致。 任何帮助或线索将不胜感激。我不知道出了什么问题，我一直在摆弄 chrome devolper 工具，试图幸运地找到解决方案。
http://landonsimmons.altervista.org/School/assign7/assign7.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utc-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img src="img/logo.png" />
<span>Computer Science Department</span>
</header>
<nav>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Classes</a></li>
<li><a href="proglist.html">Program List</a></li>
</ul>
</nav>
<section id="left">
<ul>
<li>
<a>Computer Programming</a>
<a>Computer Specialist</a>
</li><br>
<li>
<a>Information Technology Analysis</a>
</li><br>
<li>
<a>Information Technology Management</a>
</li><br>
<li>
<a>Network System Developer</a>
</li><br>
<li>
<a>Web Development Specialist</a>
</li>
</ul>
</section>
<section id="middle">
<h1 id="hist">History of College</h1>
<p id="first">
</p>
<p>
</p>
<h1 id="comp">About Computer Science</h1>
<p>
<img id="img" src="img/Capture3.PNG" />
While the computing field is one of the fastest growing segments of industry,
it is also one of the fastest changing areas technologically. Computing professionals
education does not stop with the college degree, but continues with seminars, conferences, and advanced courses and training.
In computer theory and applications, new ideas are developed every day.
Success requires an ongoing commitment to learning to maintain knowledge, skills and career opportunities.
</p>
</section>
<section id="right">
<h1 id="gain">Gainful Employment Information</h1>
<p>
The U.S. Department of Education requires colleges to disclose a variety of information for any financial
aid eligible program that <q>prepares students for gainful employment in a recognized occupation.</q> The information provided
here describes the graduation rates, the median debt of students who
completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1).
</p>
<br>
<p style="font-size: 13px">— US Labor Department</p>
</section>
<section id="bot">
<video height=260 width=323 >
<source src="vid/a1.mp4"/>
</video>
</section>
<footer>
<address>
</address>
</footer>
</body>
</html>
/***********************************************
font
***********************************************/
pre {
font-family: serif;
}
#first::first-letter {
font-size: 45px;
}
#big b {
letter-spacing: 4px;
font-family: serif;
font-size: 20px;
text-align: center;
margin-left: 180px
}
#middle p {
margin-right: 5px;
margin-top: -10px;
}
#right p {
margin: 16px 30px;
}
h1 {
padding: 5px 40px;
letter-spacing: 2px;
font-family: "Times New Roman", Times, serif;
font-weight: lighter;
}
footer address {
color: green;
font-variant: small-caps;
font-style: normal;
font-weight: bolder;
font-size: 12px;
text-align: center;
font-family: sans-serif;
}
/***********************************************
page setup
***********************************************/
body {
background-image: url(../img/parch.jpg);
display: inline-block;
max-width: 850px;
margin: 25px 8px 0 8px;
}
#left {
width: 20%;
float: left;
text-align: center;
}
#middle {
width: 40%;
border-right: 1px solid black;
border-left: 1px solid black;
display: inline-block;
}
video {
overflow: hidden;
}
#bot {
float: right;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;
display: inline-block;
vertical-align: sub;
}
#right {
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;
display: inline-block;
float: right;
}
#small {
width: 18%;
text-align: center;
display: inline-block;
float: left;
}
#big a {
letter-spacing: 8px;
}
#big {
width: 75%;
border-left: 1px solid gray;
display: inline-block;
padding-left: 25px;
}
#img {
max-height: 90px;
max-width: 140px;
margin: 10px 10px 10px 10px;
float: right;
}
/***********************************************
color scheme
***********************************************/
#comp {
background-color: gray;
text-align: center;
color: #872E3F;
}
#gain {
background-color: #B28570;
text-align: center;
}
#hist {
background-color: black;
color: #872E3F;
text-align: center;
}
#right {
background-color: #FFC1A2;
}
/***********************************************
Header
***********************************************/
header {
width: 100%;
height: 120px;
background-color: #000;
}
header span {
color: #D2E1FF;
font-size: 25px;
margin: 30px;
letter-spacing: 4px;
position: relative;
top: -30px;
}
/***********************************************
nav + list
***********************************************/
#left ul {
list-style: none;
padding: 0 0 0 0;
}
#left ul li a {
text-decoration: none;
color: black;
}
#small ul {
list-style: none;
padding: 0 0 0 0;
}
#small ul li a {
text-decoration: none;
color: black;
}
nav ul li a {
color: #fff;
font-size: 18px;
text-decoration: none;
padding: 0 15px 0 50px;
font-weight: bold;
letter-spacing: 2px;
}
nav ul {
list-style: none;
margin: 0 0 0 0;
}
nav {
width: 100%;
height: 25px;
background-color: #0000FC;
}
nav ul li {
display: inline;
}
nav ul li a:hover {
color: red;
}
#small ul li a:hover,
#left ul li a:hover {
color: #ff6666;
outline: 1px double black;
}
/***********************************************
footer
***********************************************/
footer {
clear: right;
border-top: 1px solid black;
}
最佳答案
这是您必须进行的两项更改
将 float:left; 添加到 #middle 并将页脚的 clear:right 更改为 clear:both CSS。
footer { clear:both; }
#middle {float:left;width: 40%;border-right: 1px solid black;border-left: 1px solid black;display: inline-block;}
工作 CODEPEN
关于html - 网站的一部分不适合布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37956406/