使用左边距定位颜色框

Question

我有一个2列布局，左边是侧边栏（宽度：220px），右边是内容，流畅的宽度。我希望colorbox-content仅显示在内容区域上，因此启动了colorbox：

$('a#colorbox-load').colorbox({top:20, left:220});

问题是：因为颜色框的宽度与之前相同，所以它现在会在右侧剪切内容，内容超出视口。由于我希望彩色盒能够响应，我无法提供硬编码的较小宽度来补偿向右移动。 方法是什么？

所需的布局：

+------+----------------------------------+
|      |                                  |
|      |  +----------------------------+  |
|      |  |                            |  |
|      |  |                         X  |  |
|      |  |                            |  |
|      |  |                            |  |
|      |  |                            |  |
|      |  |                            |  |
|      |  |                            |  |
|      |  +----------------------------+  |
|      |                                  |
+------+----------------------------------+

Answer 1

保留内容框（第二列）位置：相对， 并添加

#colorbox-load {
    position: absolute;/*or relative*/
    top:20,
    left:220,
    width: 300px; /* specify the default size of colourbox */
    max-width:100%;
} 

如果内容框宽度小于颜色框的右边缘，

max-width 属性将使其响应，它将强制它调整大小