Question

我可以使边栏正确显示在某些页面上，但不能全部显示。我无法弄清楚哪里出了问题。

我已经弄清了浮子，但是我不完全了解这是如何工作的以及如何使用它。因此，索引页可以正确显示，但是About页面的侧边栏位于主页内容下方，而侧边栏应显示的空间为空。

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; 
}

Answer 1

谢谢您的回复，我已将其修复！我浏览了发布“最小可复制示例”的指南，并决定回到第一个平方并检查语法错误，将可以正常工作的页面与不能正常工作的页面进行比较。

在每个问题页面上，有一个元素放置在主内容部分之外的位置不正确，这阻止了我的侧边栏浮动。

即使你们没有“解决”我的问题，您还是让我停下来思考，回到基础上为自己解决问题，这更有价值，因为我觉得我真的学到了一些东西。谢谢！ ^ _ ^

补充工具栏在某些页面上正确显示，但在其他页面上未正确显示

1 个答案: