我正在处理一个有两个独立列的HTML页面。而且我需要按两对一对打印文本，因为我将基于此HTML构建JSP。现在我遇到一些问题，每次我尝试打印一对新文本时，它都会与前一个文本重叠。我试图在左侧和右侧的样式中添加clear:both，它仍然不能很好地运作。
这是我的CSS：
header {
background-color: #74afe0;
font-size: 35pt;
text-align: center;
vertical-align: center;
height: 80px;
position: fixed;
left: 0px;
right: 0px;
width: 100%;
top: 0;
line-height: 80px;
}
footer {
background-color: #74afe0;
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
height: 1em;
text-align: right;
}
.container {
margin-top: 80px;
left: 0;
bottom: 0;
position: relative;
}
.container p,
ul,
h2 {
margin: 0;
}
#left-col {
width: calc(30% - 1.5em);
text-align: right;
color: #74afe0;
position: fixed;
left: 1em;
overflow: auto;
}
#right-col {
width: calc(70% - 2.5em);
bottom: 1em;
height: calc(100% - 80px - 1em);
top: 80px;
position: fixed;
right: 1em;
overflow: scroll;
border-left: 3px solid #74afe0;
padding-left: 1em;
}
#list {
margin: 0;
}
#content {
font-size: 25px;
}<header>CSS Layout Project</header>
<div class="container">
<section id="left-col">
<div id="title">
<p>
<h2><b>Course Description</b></h2>
</p>
</div>
<div id="content">
<p>fields</p>
</div>
</section>
<section id="right-col">
<p>
<h2><b>Acdemic Integrity</b></h2>
</p>
<div id="content">
<p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
when they take care of everything, I know in a week I’ll just end up going back there.</p>
</div>
</section>
<section id="left-col">
<div id="content">
<p>fields</p>
</div>
</section>
<section id="right-col">
<div id="content">
<p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
when they take care of everything, I know in a week I’ll just end up going back there.</p>
</div>
</section>
</div>
<footer>© Copyright by XXXXXX</footer>
答案 0 :(得分：2)
您不应该在左/右部分使用固定定位。很难告诉你该做什么，因为我不知道这个页面的理想布局应该是什么样的，但删除了固定定位并使用{{1}将flex应用于父页面让你使用现有的CSS，并以我认为更接近你最终目标的方式进行布局。我还删除了一些不必要的CSS并在flex-wrap: wrap添加了一个margin-bottom，以便有固定页脚的空间。
还将您的ID更改为了课程，因为其他人已经指出您每页只能有1个ID。
.containerheader {
background-color: #74afe0;
font-size: 35pt;
text-align: center;
height: 80px;
position: fixed;
left: 0px;
right: 0px;
width: 100%;
top: 0;
line-height: 80px;
}
footer {
background-color: #74afe0;
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
height: 1em;
text-align: right;
}
.container {
margin-top: 80px;
margin-bottom: 1.5em;
left: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
}
.container p,
ul,
h2 {
margin: 0;
}
.left-col {
width: calc(30% - 1.5em);
text-align: right;
color: #74afe0;
overflow: auto;
}
.right-col {
width: calc(70% - 2.5em);
bottom: 1em;
height: calc(100% - 80px - 1em);
overflow: scroll;
border-left: 3px solid #74afe0;
padding-left: 1em;
}
.content {
font-size: 25px;
}
您还可以使用<header>CSS Layout Project</header>
<div class="container">
<section class="left-col">
<div id="title">
<p>
<h2><b>Course Description</b></h2>
</p>
</div>
<div class="content">
<p>fields</p>
</div>
</section>
<section class="right-col">
<p>
<h2><b>Acdemic Integrity</b></h2>
</p>
<div class="content">
<p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
when they take care of everything, I know in a week I’ll just end up going back there.</p>
</div>
</section>
<section class="left-col">
<div class="content">
<p>fields</p>
</div>
</section>
<section class="right-col">
<div class="content">
<p>For years I have been driving an old used car with a lot of mileage, and I hate it. It gets me where I need to go, but I’m tired of fixing leaks and broken parts all the time. It's annoying that I have to take it to the mechanic every time. Even
when they take care of everything, I know in a week I’ll just end up going back there.</p>
</div>
</section>
</div>
<footer>© Copyright by XXXXXX</footer>代替float
flexheader {
background-color: #74afe0;
font-size: 35pt;
text-align: center;
height: 80px;
position: fixed;
left: 0px;
right: 0px;
width: 100%;
top: 0;
line-height: 80px;
}
footer {
background-color: #74afe0;
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
height: 1em;
text-align: right;
}
.container {
margin-top: 80px;
margin-bottom: 1.5em;
left: 0;
bottom: 0;
}
.container p,
ul,
h2 {
margin: 0;
}
.left-col {
width: calc(30% - 1.5em);
text-align: right;
color: #74afe0;
overflow: auto;
float: left;
clear: left;
}
.right-col {
width: calc(70% - 2.5em);
bottom: 1em;
height: calc(100% - 80px - 1em);
overflow: scroll;
border-left: 3px solid #74afe0;
padding-left: 1em;
}
.content {
font-size: 25px;
}
答案 1 :(得分：0)
所有#id标签必须用于一个元素。如果要定位多个元素，请使用类。