jquery - 使用左边距定位颜色框

Question

我有一个 2 列布局，边栏在左侧(宽度:220 像素)，内容在右侧，宽度可变。我希望 colorbox-content 只出现在 content-area 上，所以像这样启动 colorbox:

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

问题是:因为 colorbox 的宽度和以前一样，它现在将右侧的内容切掉，内容超出了视口(viewport)。因为我希望颜色框能够响应，所以我无法提供硬编码的较小宽度来补偿向右移动。 方法是什么？

所需的布局:

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

Answer 1

保留内容框(第二列)position:relative， 并添加

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

ma​​x-width 如果内容框宽度小于颜色框的右边缘，属性将使其响应，它将强制调整大小