Question

我目前正在练习创建响应式网站。

我的网站侧边栏有问题，

我不相信我知道如何正确定位，

我也不知道当屏幕宽度减小时如何防止它向下移动。

我该如何解决这个问题？

我很难发布代码，我似乎无法通过第一行或第二行工作。

我添加了一个包含所有代码的jsFiddle。我在旁边栏边做了评论， .other ，在我的css代码中。

http://jsfiddle.net/jwn69/

css：

/*

Answer 1

嗯，首先，我非常依赖'浮动'这样的属性。它们很棘手，在某些情况下会得到很多重绘，这会减慢你的应用程序。

为了制作你想要的东西，我不得不改变de .focus和.other类

.focus {
    width:66.00625%;
    display: inline-block;
    /*    844.8px / 1280 */
    background-color: #3d3c3c;
}
.other {
    width: 30.99375%;   
    display: inline-block;
    vertical-align: top;
    /*    1.5% allowed on each side*/
    background-color: #3d3c3c;
}

我还必须警告你，响应式设计不是要做几个在每种条件/屏幕大小下工作的css规则。使用更多的CSS，你会让这个页面看起来更好，最终它可以在任何设备上使用。但是，例如，移动应用程序没有像您正在构建的菜单那样的菜单。它使用抽屉菜单和其他东西来显示链接，因为它们的空间有限。

虽然您可以在非常大的屏幕或非常小的屏幕上显示这些内容，但它并不适用，因为每个设备都有自己更好的方式来显示您的UI组件。

所以，我建议你阅读media-queries。它们对于适合某种条件的设备制定特定的CSS规则非常有用。

然后，我建议你学习positions如何使用CSS

继承你的fiddle

如何保持这个侧边栏固定但仍然响应？

1 个答案: