html - 响应式设计 : Using pixel width divs within fluid design

Question

设置:

我有一个侧边栏和一个主要内容栏。侧边栏的宽度为 33%，主要内容的像素宽度填充了其余空间。我希望主要内容保持固定宽度，直到它到达某个媒体查询断点并变小。所以基本上我只希望侧边栏随着窗口大小的调整而缩小，直到达到断点。

这听起来对我来说应该很简单，但我遇到了问题。当我缩小窗口时，侧边栏收缩得不够快，主要内容会掉到它下面。我想这是因为主要内容没有缩小，它的 px 宽度在屏幕中所占的百分比越来越高，而侧边栏总是只占 33%。

我觉得有一些简单的解决方案，但我想不出。有什么想法吗？

谢谢大家

Answer 1

概览

如果您将内容框设置为 67%，并注释掉 div 之间的空格，它应该可以工作。

我还添加了 box-sizing:border-box; 因为这样你就可以添加 padding 而它不会添加到总宽度上。

这不适用于边距，如果您希望它与边距正确匹配，您必须使用边距百分比，以便边距+宽度=100%。

背景颜色只是为了展示 div 的外观。

这是一个例子:http://jsfiddle.net/ZZwbF/

HTML:

<div id='container'>
<div class='sidebar'>
    Sidebar Test
</div><!--
--><div class='content'>
    Content Test
</div><!--
--></div>
​

CSS:

.sidebar
{
display:inline-block;
width:33%;
box-sizing:border-box;    
background-color:#09f;
}

.content
{
display:inline-block;
width:67%;
box-sizing:border-box;    
background-color:#0F9;
}