寻找优雅的 Overflow 解决方案

Question

我正在寻找以下问题的解决方案：

内容 div 设置为 width:65%（向左浮动），边栏设置为 30%（向右浮动）。

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

我想实现如下效果：

A)只要#container的宽度超过600px，我想让#content左边占65%，#sidebar自动填满右边剩下的space .

B) 一旦#container 的宽度小于 601px（由于在移动设备上或调整浏览器大小 window），我想要 #content div 以填充 #container 的 100% 宽度，并让 #sidebar 跳到它下面（并填充 100% 的 #container 宽度！）。

这些事情可能吗？我的搜索结果一无所获，尽管我可能没有问正确的问题。

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

屏幕 < 600px 的样式不需要媒体查询，因为样式 sheet 已经在检查屏幕是否大于 600px，如果不是，则小于 600px。

为垃圾解释道歉，我会成为一个糟糕的学校老师;)

这里有一篇 link 的文章解释得很好

寻找优雅的 Overflow 解决方案

Looking for elegant Overflow solutions

css

crop

overflow