Question

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

我觉得它与填充有关，但我已经尝试删除所有填充，它仍然会这样做（所有这些都是在稍微不同的点）。

该网站目前处于WP即将推出模式，但如果有人能够并且愿意看一下它，我可能会把它放一点。它让我疯狂！

由于我在这里没有足够的评级，但我不允许显示照片，所以也许链接可以使用吗？

这是1006px - 这很好。

CLICK HERE TO VIEW - Sample 1

当尺寸缩小到1001px时，这就是它的样子 - 不太好！我预计它会扩展并保持在3列，直到它达到第一个媒体查询设置为889px，但事实并非如此。相反，它做到了......

CLICK HERE TO VIEW - Sample 2

这就是它自己的行为，因为我已经把它设置为889px QUERY - 罚款。

......好吧我不允许在这里发布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;
    }

}

Answer 1

如果没有要检查的实时网址，很难确定。通常这种问题是由于边距和填充打破了底层网格，但在这种情况下，以下内容对我来说是个问题

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

3列响应式布局问题

1 个答案: