固定的右边栏在响应站点上折叠

我有一个2栏的网站：左栏是流体，右栏是固定的。当我缩放浏览器以检查网站的响应情况时，右栏似乎在左栏下方折叠。我不希望这个正确的列崩溃。我想对于左主柱流畅地合同该网站是在缩放固定的右边栏在响应站点上折叠

这里是我的代码的基础知识：http://jsfiddle.net/kGkRD/

<section class="main"> 
    Left 
</section> 

<aside class="sidebar"> 
    Right 
</aside> 

body { 
    max-width: 500px; 
    width: 100%; 
    margin: 0 auto; 
} 
section.main { 
    float: left; 
    max-width: 300px; 
    width: 100%; 
    background-color: red; 
} 
aside.sidebar { 
    float: right; 
    width: 200px; 
    background-color: blue; 
}

来源

2013-09-30 Matt

如果你不想让它显示在另一个下面，你想要它做什么？ –

你想要发生什么？如果较大的一个缩小并保持侧边栏宽度固定，或者您希望它们都设置为其父容器的固定百分比（例如70/30％），或者是什么？在特定屏幕大小以下的主内容下包装侧边栏是响应式网页设计中非常常用的技术，因为您可以想象，在320px宽的移动肖像视口中，您并不需要侧栏占据屏幕的三分之一。 – Ennui

较大的色谱柱（主）应该在右侧柱子保持固定时收缩。 – Matt

首先把你的右浮动元素，去掉float: left;和width: 100%;从section.main并添加overflow: hidden;：http://jsfiddle.net/mdares/kGkRD/1/

HTML：

<aside class="sidebar"> 
    Hello World 
</aside> 
<section class="main"> 
    Hello World 
</section>

CSS：

body { 
    max-width: 500px; 
    width: 100%; 
    margin: 0 auto; 
} 
section.main { 
    max-width: 300px; 
    background-color: red; 
    overflow: hidden; 
} 
aside.sidebar { 
    float: right; 
    width: 200px; 
    background-color: blue; 
}

更新：我是否正确理解和您正在寻找这样的：http://jsfiddle.net/mdares/kGkRD/4/

body { 
    max-width: 500px; 
    width: 100%; 
    margin: 0 auto; 
} 
section.main { 
    max-width: 300px; 
    width: 100%; 
    background-color: red; 
    overflow: hidden; 
    float: left; 
} 
aside.sidebar { 
    float: left; 
    width: 200px; 
    background-color: blue; 
}

如果是的话你只是缺少你overflow: hidden;

更新2： T O地址您的评论试试这个：http://jsfiddle.net/mdares/kGkRD/5/

CSS：

body { 
    max-width: 500px; 
    width: 100%; 
    margin: 0 auto; 
} 
#container { 
    position: relative; 
    width: 100%; 
} 
section.main { 
    max-width: 300px; 
    width: 100%; 
    background-color: red; 
    overflow: hidden; 
     float: left; 
} 
aside.sidebar { 
    width: 200px; 
    background-color: blue; 
    position: absolute; 
    right: 0; 
} 

@media screen and (max-width: 350px) { 
    aside.sidebar { 
    position: static; 
    float: left; 
    } 
}

HTML：

<div id="container"> 
    <section class="main"> 
    Hello World 
    </section> 
    <aside class="sidebar"> 
    Hello World 
    </aside> 
</div>

来源

2013-09-30 17:20:37 Matthew

使用媒体查询让我们说在768宽度，如果在html顺序中堆叠较高，我将如何去堆叠section.main ontop的aside.sidebar？ – Matt

更新 - 那你以后是什么？ – Matthew

这几乎是我要找的东西，除了主列应该保持灵活性并且正确的列不应该突破到下一行，直到被媒体查询指示为止。 – Matt

<aside class="sidebar"> 
    Hello World 
</aside> 
<section class="main"> 
    Hello World123 
</section>

CSS

@media (max-width:500px){ 
section.main { 
    //display:block; 
    float:right; 
} 
}

Fiddle

编辑：请使用CSS更新。尝试使用display:block和float:right。

来源

2013-09-30 17:21:51 vishalkin

这是我想要发生的情况，除了我计划插入宽度为768的媒体查询，并且我希望侧边栏放置在底部。 – Matt

@Matt你已经有宽度小于768px。 – vishalkin

我只是使用768作为例子，因为我的网站尺寸比我在示例小提琴中的要大得多。 – Matt

固定的右边栏在响应站点​​上折叠

回答

相关问题

固定的右边栏在响应站点上折叠