Question

I'm looking for a solution to the following problem:

The content div is set to width:65% (float left) and the sidebar is set to 30% (float right).

    #container {
    margin: 0px auto 40px auto;
    padding: 20px 70px 70px 70px;
    overflow:auto;
    max-width: 1000px;
    border: 1px solid white;
}

    #content {
    margin: 0 20px 0 0;
    float: left;
    width: 65%;
    overflow-x: hidden;
}

        #sidebar {
    float:right;
     width:30%;
     }

I'd like to achieve the following effect:

A) As long as the width of the #container exceeds 600px, I want the #content to take up 65% on the left and the #sidebar to automatically fill up the remaining space on the right.

B) As soon as the width of the #container is smaller than 601px (due to being on a mobile device or resizing the browser window), I'd like the #content div to fill 100% of the width of the #container, and for the #sidebar to jump down below it (and fill 100% of the width of the #container as well!).

Are these things possible? My searches turned out nothing, though it's likely I didn't ask the proper questions.

Answer 1

在CSS中，您可以添加媒体查询。例如：

@media all and (min-width: 600px) {
// add styles in here for screens 600px +
    #content {
width:65%;
}
}
// styles for screens < 600px will go here

屏幕的样式＆lt; 600px不需要媒体查询，因为样式表已经在检查屏幕是否为600px以上，所以如果不是那么它将小于600px。

为垃圾解释道歉，我会让一个可怕的学校老师;）

这是一篇文章link，可以很好地解释

Looking for elegant Overflow solutions

1 个答案: