css - 将 div 向左浮动和 div 居中而不在调整大小时重叠

Question

我正在寻找一个 div 左对齐（Div 1）和一个 div 对齐中心（Div 2）。

当用户调整窗口大小时，居中的 div (Div 2) 应保持居中，直到碰到 Div 1 的边缘。
Div 2 (居中的 div) 不应总是靠左停靠，除非 Div 1 (left div) 的宽度加上Div 2 的一半宽度大于浏览器宽度的一半。

关于在没有 javascript 的情况下实现这一点的任何想法？

这是一个工作示例：http: //jsfiddle.net/pjg8D/9/

<div id="fixedBar">
    <div id="div1"></div>
    <div id="div2"></div>
</div>


<!-- http://i42.tinypic.com/iqv5tu.jpg -->

#fixedBar {
    height: 50px;
    width: 100%;
    background: #f99;       

}

#div1 {
    width: 200px;
    height: 50px;
    background: green;
    float: left;
}

#div2 {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background: blue;
}

Answer 1

该问题的解决方案是min-width在容器 div 上使用。此宽度的比率计算如下：( Div1 宽度 + Div2 宽度的一半) x 2。

解决方案在这里：http: //jsfiddle.net/pjg8D/16/

Answer 2

你需要给左边的 div 一个%宽度，然后给右边的 div 一个left-margin相同的宽度%。试试这个：

#div1 {
    width: 25%;
    height: 50px;
    background: green;
    float: left;
}

#div2 {
    width: 250px;
    height: 50px;
    margin: 0 0 0 25%;
    background: blue;
}

更新的小提琴