我正在尝试创建一个响应式布局,其左侧边栏会在较窄的屏幕上折叠。有点像 http://purecss.io/但也有一个固定的顶部标题。
到目前为止我的工作(代码真的太长了,无法在这里重现):http://jsbin.com/uhalic/3/edit
我正在努力解决两个问题(请注意,您需要使 HTML 部分的宽度大于 450 像素才能重现这些问题):
(1) 列表的最后一个元素被横向移动,我无法理解。
(2) 页脚应该在视觉上完全包含在 #main
(红色部分)中,事实上它在语义上也是如此,但文本部分落入了 #sidebar
(蓝色部分)。
我做错了什么?
最佳答案
是因为红色一栏没有<li>
它左边的元素,所以实际上有 4 个 <li>
红色部分中的元素被倾斜,两个在每个可见元素的左侧但被隐藏。
您需要添加一个 margin-left: 160px
到 .results
类(class)。然后删除 width: 100%
关闭.result,或者如果您要保留它,请将其设置为 100%。
此外,添加 margin-left: 200px
至 #footer
关于CSS:响应式左侧菜单,右侧栏中的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17812364/