css - 两列宽度相同，但第一列是静态位置，第二列是绝对位置

Question

我想制作一个具有 2 列布局的响应式网站。对于桌面屏幕，应显示两列，对于小屏幕(智能手机)，应仅显示其中一列。

要在列之间切换，用户必须进行水平滑动(从右到左或从左到右)。这很好用(对于桌面用户:使用鼠标并进行拖放)。

问题是:右列有一个绝对 位置。左列有一个静态 位置(我认为)和一个100% 的宽度。对于小屏幕，完整布局是相对的，由媒体查询决定。 我不知道右栏应该有哪个宽度值。我尝试了多个百分比值 (100%-90%)，但当我找到正确的值时，我意识到它只适用于特定的窗口宽度。当我为某些像素调整窗口大小时，它会中断。

因此，两列都应在红色边框( fiddle 中)的宽度内/相同宽度内。

不要忘记调整结果窗口的大小，以模拟小屏幕!
您还可以切换回左列，进行反向滑动/拖放。

这是 fiddle :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:我使用带有 less 和自定义网格布局的 Twitter Bootstrap，所以我添加了完整的生成的 css。重要的css规则应该放在css窗口的最后

Answer 1

解决方案是移除设置为 20px 的水平主体内边距。或者为它设置一个百分比值。