Responsive design 3列响应性布局问题

有人知道为什么三列流体布局中的第三个孩子在移动点没有媒体查询设置时会下降到下一行吗

我觉得这和填充物有关，但我试着去掉了所有的填充物，但仍然是在一个稍微不同的点上

该网站目前处于可湿性粉剂即将到来的模式，但如果有人能够并愿意看看它，我可能会把它活一点。快把我逼疯了

因为我在这里没有足够的评级，但我不被允许展示照片，所以也许链接到它们会起作用

这是它在1006px-这是好的

这是当尺寸减小到1001px时的样子-不好！ 我希望它可以扩展并保持在3列，直到它到达889px的第一个媒体查询集，但它没有。相反，它是这样做的

这就是它自己的行为，就像我在给定的889px查询中设置的那样-很好

。。。我不允许在这里发布超过2个链接，所以你必须在这里相信我的话：

代码如下：

<div id="Thepagewrap">

    <div id="Theheader">
        <h1>3 Column Responsive Layout</h1>
    </div>

    <div id="Thecontent">
        <h2>1st Content Area</h2>
        <p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
    </div>

    <div id="Themiddle">
        <h2>2nd Content Area</h2>
        <p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>

    <div id="Thesidebar">
        <h2>3rd Content Area</h2>
        <p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
        </div>

    <div id="Thefooter">
        <h4>Footer</h4>
        <p>Footer text</p>
    </div>

</div>


CSS

    /* STRUCTURE */

#Thepagewrap {
    padding: 5px;
}

#Theheader {
    height: 100px;
    padding: 0 15px;
}

#Thecontent {
    float: left;
    padding: 5px 15px;
    width: 29%;
}

#Themiddle {
    float: left;
    margin: 0 6px 6px;
    padding: 5px 15px;
    width: 30%;
}

#Thesidebar {
    float: left;
    padding: 5px 15px;
    width: 29%;
}
#Thefooter {
    clear: both;
    padding: 0 15px;
}

#Thepagewrap, #Theheader, #Thecontent, #Themiddle, #Thesidebar, #Thefooter {
    border: solid 1px #ccc;
}

#Theheader, #Thecontent, #Themiddle, #Thesidebar {
    margin-bottom: 5px;
}

@media screen and (max-width: 889px){ 
#Thepagewrap {
        width: 94%;
    }
    #Thecontent {
        width: 41%;
        padding: 1% 4%;
    }
    #Themiddle {
        width: 41%;
        padding: 1% 4%;
        margin: 0px 0px 5px 5px;
        float: right;
    }

    #Thesidebar {
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }

    #Theheader, #footer {
        padding: 1% 4%;
    }
}
@media screen and (max-width: 600px) {

    #Thecontent {
        width: auto;
        float: none;
    }

    #Themiddle {
        width: auto;
        float: none;
        margin-left: 0px;
    }

    #Thesidebar {
        width: auto;
        float: none;
    }

}

@media screen and (max-width: 480px) {

    #Theheader {
        height: auto;
    }
    h1 {
        font-size: 2em;
    }
    #Thesidebar {
        display: none;
    }

}

---

如果没有要检查的实时URL，很难确定。这类问题通常是由于边缘和填充物破坏了底层网格，但在这种情况下，我觉得下面的问题很棘手

@media screen and (max-width: 889px){ 
...
#Thesidebar {
        clear: both;   <===== why is this here?
        padding: 1% 4%;
        width: auto;
        float: none;
    }  
}

---

检查元素上的填充和边距，如果没有空间，它将下降到下一行，因此responsivebtw js fiffle it：有问题的元素上没有边距。我已经尝试删除所有的填充，但它仍然在一个稍有不同的点上完成。这不是重点，你有一个with集合，单位为%，当它变小时，媒体查询将被设置为运动，并且41+41+41>100，因此它将下降到下一行。原谅我，我不熟悉这一切。对不起，如果我的问题听起来很愚蠢，那是因为我还在学习。所以我认为a%只是保持总宽度不变的%，直到它被给定的捕捉点触发？当你说它变得太小时，我有点困惑，因为除非剩下0%的空间，否则在任何给定的宽度中肯定有29%的空间？我看到其他3列布局只是缩小而没有捕捉？我已尝试更改@media screen处元素的41%宽度和最大宽度：980px，但它仅更改980px处框的大小。：/困惑网