css - 处理流体布局的水平对齐

Question

我有一个两列布局(左边是流动的，右边是固定的)。
我想在流体列中连续放置三个 div，以便它们在包装器中居中，同时有足够的空间，然后它们应该在左侧对齐。

<div class="wrapper">
Wrapper
<div class="header">
         header
</div> 
<div class="wrapleft">       
    <div class="left">
        <div class="subwrapper">
            <div class="first">Once this reach the left border, it should stay there.</div>
            <div class="second">This one should go under the blue div when there is not enough space for two divs and stay left aligned.</div>
            <div class="third">This one should go under the blue div when there is not enough space for three divs and stay left aligned.</div>
        </div>
    </div>
</div>    
<div class="right">
        right
</div> 
    <div class="footer">
        footer
    </div>     

.wrapper{
   width: 100%;
   margin: 0 auto;
    text-align:center;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
    text-align:left;
}
.wrapleft{
   float: left;
   width: 100%;
   background-color: #cfcfcf;
    text-align:center;
}
.left{
   margin-right: 250px;
   background-color: #afeeee;
   height: 200px;
    text-align:right;
}
.right{
   float: right;
   width: 240px;
   margin-left: -240px;
   background-color: #98fb98;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}
body {
   padding: 0px;
   margin: 0px;
}

.subwrapper div {
    height: 100px;
    width:200px;
    margin: 0 auto;
    text-align:center;
    color:white;
    display: inline-block;
    vertical-align:top;
    }
.subwrapper {
width:100%;
    background:purple;
    max-width:100%;
}

.first {
    background:blue;
}

.second {
    background:green;
}

.third {
    background:red;
}
​

这是一个 jsfiddle，阐明了我的意思 http://jsfiddle.net/notme/SZjJG/
其实我可以得到第一部分，但是一旦没有更多的空间，我就无法在左边对齐 div。
我不能使用媒体查询，因为宽度是动态的。

更新
我尝试添加一些图片以使事情清楚。

大分辨率:三个 div 居中

中分辨率:三个div适合宽度

小分辨率:三个 div 应该留在左侧。 我不想用黄色圈出左边距。

Answer 1

尝试添加:

.first, .second, .third {
    float:left;
}

同时添加到子包装器:

max-width: 600px;
display: block;
margin: 0 auto;

出于显而易见的原因，您需要添加“display: block”和“margin: 0 auto”。但是，“max-width”需要等于 .first、second 和 .third div 的最大宽度。

不过，一旦您向 .first、.second 和 .third div 添加填充，宽度就会增加。不确定你是否知道。所以你可能想添加“box-sizing: border-box;”到你的.first，.second。和 .third div 的 CSS。

示例:http://jsfiddle.net/SZjJG/17/