我想制作一个具有 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 窗口的末尾