Question

设置：

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

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

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

谢谢，加尔斯和家伙

Answer 1

概述

如果您将内容框设为67％，并在div之间注释掉空格，那么它应该可以正常工作。

我还添加了box-sizing:border-box;因为你可以添加填充，它不会添加到总宽度上。

NOT 适用于保证金，您必须使用保证金百分比，以便边距+宽度= 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;
}

Answer 2

我明白了。

我不得不停止尝试填满整个屏幕。考虑到人们拥有比我更大的屏幕，这是毫无意义的。因此，我没有在内容上留下合适的边距（我没有提及）以填充剩余空间，而是将其向左移动。现在，我将在边栏上放置最大宽度，并在调整大小时捕获内容框时进行媒体查询。

响应式设计：在流体设计中使用像素宽度div

2 个答案:

概述