用左边距定位颜色盒

Question

我有一个两栏的布局，侧边栏在左边(宽度:220px)，内容在右边，流体宽度。我希望colorbox-content只出现在content-area上，所以像这样初始化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属性将使其响应如果内容框宽度小于color -box的右边缘，它将强制它调整大小