我想制作一个包含2列布局的响应式网站。 对于桌面屏幕，应显示两列，对于小屏幕（智能手机），只应显示其中一列。
要在列之间切换，用户必须进行水平滑动（从右到左或从左到右）。这样可以正常工作（对于桌面用户：使用鼠标并执行拖放操作）。
问题是：右栏有绝对位置。左栏有静态位置（我认为），宽度为100％。对于小屏幕，完整的布局是相对的，通过媒体查询。 我不知道右列应该具有哪个宽度值。我尝试了多个百分比值（100％-90％），但是当我找到正确的值时，我意识到它只适用于特定的窗口宽度。当我为一些像素调整窗口大小时，它会中断。
因此两列的宽度应与红色边框相同（在小提琴中）。
不要忘记调整结果窗口的大小，以模拟小屏幕！
您也可以切换回左栏，进行反向滑动/拖放。
这里是小提琴：http://jsfiddle.net/sUPfh/1/
我有另一个解决方案（2）宽度没问题，但幻灯片效果无法正常工作。 在幻灯片效果期间，右列位于左列下方。当效果结束时，右栏突然出现在正确的位置，但它应该从侧面滑动。
您可以尝试这两种解决方案，只需删除/评论css窗口右侧列的解决方案之一：
/* solution 1 (width is not really percentage, when resize the window, but slide effect ok) */
position: absolute;
width: 94%; /* width only ok if the window width is about 695px */
/* solution 2 (width ok, but wrong slide effect */
/*
position: static;
width: 100%;
*/
PS：我使用较少的Twitter Bootstrap和自定义网格布局，所以我添加了完整生成的CSS。重要的css规则应该在css窗口的末尾
答案 0 :(得分：0)
解决方案是移除水平体填充，设置为20px。或者替代为其设置百分比值。