0

设置：

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

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

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

谢谢，姑娘们和伙计们

4

2 回答 2

2

概述

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

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

这不适用于边距，如果您希望它与边距正确匹配，则必须使用边距百分比，以便边距+宽度 =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;
}
于 2012-07-23T14:23:57.797 回答
1

我想到了。

我只需要停止尝试填满整个屏幕。考虑到人们的屏幕比我大，这毫无意义。因此，我没有在内容上设置右边距（我没有提到）以使其填充剩余空间，而是将其向左浮动。现在我将在侧边栏上放置一个最大宽度，并在调整大小赶上内容框时进行媒体查询。

于 2012-07-23T20:18:23.020 回答