寻找优雅的溢出解决方案

Posted 2023-02-25

【中文标题】寻找优雅的溢出解决方案

【英文标题】：Looking for elegant Overflow solutions

【发布时间】：2015-09-01 21:48:50

【问题描述】：

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

内容 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自动填满右边的剩余空间。

B）只要#container 的宽度小于 601px（由于在移动设备上或调整浏览器窗口的大小），我希望 #content div 填充 100% 的宽度#container，并让#sidebar 跳到它下方（并填充#container 的 100% 宽度！）。

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

【问题讨论】：

请多解释和详细说明以澄清您的问题，另外如果您直接提出问题而不是参考其他会员可能无法理解的非英文网站，那将是很好的。

好的，不好意思问的不清楚，我明天再详细说（现在走）

请让我知道这个问题现在是否足够清晰和详细。

一篇关于媒体查询的文章，希望对您有所帮助。 css-tricks.com/css-media-queries

好多了，我觉得现在可以理解了

【参考方案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

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

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