相关疑难解决方法(0)

我的要求很简单:2列,右列有固定大小.不幸的是,我无法在stackoverflow和Google上找到有效的解决方案.如果我在自己的上下文中实现,那么每个解决方案都会失败 目前的解决方案是:

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

我用上面的代码得到以下内容:

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

请指教.非常感谢!

我有两个div并排.右边的div有一个固定的宽度.即使窗口调整大小,左侧div也应填充剩余空间.例:

+---------------------------------+  +---------------+
|                                 |  |               |
|             divLeft             |  |    divRight   |
|       <- dynamic width ->       |  |     120px     |
|                                 |  |               |
+---------------------------------+  +---------------+

<div>
    <div id="divLeft">...</div>
    <div id="divRight">...</div>
<div>

有一个解决方案使用float:右边的元素,但它需要重新排序元素,如下所示:

<div>
    <div id="divRight" style="float: right; width: 120px;">...</div>
    <div id="divLeft">...</div>
<div>

有没有需要重新排序元素的解决方案？我正处于重新排序它们会导致其他问题的情况.我更喜欢CSS/HTML解决方案,但我愿意使用Javascript/JQuery.

这是我尝试解决它的一个不起作用的JSFiddle.我正试图将蓝色div放在绿色div的右侧.