Css 侧边栏在某些页面上正确显示,但在其他页面上未正确显示
我可以让边栏在某些页面上正确显示,但不是全部页面。我想不出哪里出了错 我在清理浮动方面做得很糟糕,但我不完全理解这是如何工作的,以及如何应用它。因此,索引页面显示正确,但about页面的侧栏位于主页内容下,侧栏应显示的空间为空Css 侧边栏在某些页面上正确显示,但在其他页面上未正确显示,css,Css,我可以让边栏在某些页面上正确显示,但不是全部页面。我想不出哪里出了错 我在清理浮动方面做得很糟糕,但我不完全理解这是如何工作的,以及如何应用它。因此,索引页面显示正确,但about页面的侧栏位于主页内容下,侧栏应显示的空间为空 article::after, #home-two-parts::after { content:''; display: block; clear: both; } #home-main-left { float: left; widt
article::after, #home-two-parts::after {
content:''; display: block; clear: both;
}
#home-main-left {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
/* === HOMEPAGE - Left Top === */
#intro {
margin-bottom: 30px;
}
figure {
margin: 0;
padding: 0;
}
figure img{
display: inline-block;
width: 60%; height: auto;
padding-right: 20px;
}
figcaption {
display: inline-block;
width: 30%;
vertical-align: top;
}
/* === HOMEPAGE - Left Bottom === */
#home-two-parts {
margin-bottom: 50px;
}
#home-two-parts p {
height: 80px;
}
#home-two-parts img {
width: 80%;
height: auto;
}
#about-button, #tutorial-button {
float: left;
width: 45%;
}
#about-button {
margin-right: 30px;
}
/* === ABOUT page ===*/
article::after, #about-extra-two::after {
clear: both;
}
#About {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
#about-textWrap img {
float: left;
margin: 0 1em 1em 0;
display: inline-block;
width: 40%; height: auto;
padding-right: 20px;
}
#about-videos {
padding-bottom: 20px;
}
.video {
display: inline-block;
width: 100%;
height: auto;
text-align: center;
}
.video-caption {
text-align: left;
float: right;
display: inline-block;
margin-bottom: 20px;
}
#links {
width: 100%;
padding: 0 10px 0 10px;
}
#more, #directory {
float: left;
width: 30%;
height: 250px;
margin-left: 45px;
padding: 15px;
background-color: #f0c1e6;
overflow: auto;
}
#extra-two {
margin-bottom: 50px;
}
#extra-two h3 {
text-align: center;
color: #ffffff;
background: #191970;
}
#extra-two p {
height: 80px;
width: 70%;
}
#extra-two li {
padding-bottom: 10px;
}
#links {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
#links ul {
width: 100%;
text-align: left;
margin: 20px;
padding-bottom: 20px;
}
#links li {
list-style: circle;
}
伙计们,谢谢你们的回复,我修好了! 我仔细阅读了发布“最小可复制示例”的指南,并决定回到第一步,检查语法错误,比较可用的页面和不可用的页面 在每个有问题的页面上,有一个元素被错误地定位在主内容部分之外,阻止了我的侧边栏浮动
尽管你们并没有“解决”我的问题,但你们让我停下来思考,回到基础上来,为自己解决问题,这更有价值,因为我觉得我真的学到了一些东西。谢谢大家!^_^ 伙计们,谢谢你们的回复,我修好了! 我仔细阅读了发布“最小可复制示例”的指南,并决定回到第一步,检查语法错误,比较可用的页面和不可用的页面 在每个有问题的页面上,有一个元素被错误地定位在主内容部分之外,阻止了我的侧边栏浮动
尽管你们并没有“解决”我的问题,但你们让我停下来思考,回到基础上来,为自己解决问题,这更有价值,因为我觉得我真的学到了一些东西。谢谢大家!^_^ 完整的代码请访问堆栈溢出u我们可能需要查看HTML主页和关于页面?您可以减少发布到与
侧栏相关元素的CSS
。\u检查此项以获取有关创建最小可复制示例的更多指南>>>完整代码请访问堆栈溢出u我们可能需要查看HTML主页和关于页面?您可以减少发布到与侧栏相关元素的CSS
。\u有关创建最小可复制示例的更多指南,请查看此链接>>>