유체 레이아웃에서 수평 정렬 처리

Question

두 개의 열 레이아웃 (유체 왼쪽, 오른쪽 고정)이 있습니다.
유체 열에 3 개의 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; 
} 
​ 

<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>  

내가 http://jsfiddle.net/notme/SZjJG/
는 사실 내가 처음 부분을 얻을 수 있습니다 무엇을 의미하는지 명확히 jsfiddle이지만, 나는 한 번이 왼쪽에있는 div를 정렬 할 수 아니에요 더 이상 공간이 없습니다.
너비가 다이내믹이기 때문에 미디어 쿼리를 사용할 수 없습니다.

업데이트
나는 일을 분명히하기 위해 사진을 추가하려고합니다.

큰 해상도는 : 세 된 div는

중간 해상도 중심으로되어 세 div의가에 머물해야합니다 세 div의 너비

작은 해상도에 맞게 왼쪽. 노란색으로 둘러싸인 왼쪽 여백을 원하지 않습니다..

Answer 1

를 추가해보십시오 : 분명한 이유, ": : 블록 디스플레이"과 "0 자동 마진"당신은 추가해야합니다

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

을 :

또한

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

이 subwrapper에 추가 . 그러나 "최대 너비"는 .first, second 및 .third div의 최대 너비와 동일해야합니다.

패딩을 .first, .second 및 .third div에 추가하면 너비가 증가합니다. 당신이 알고 있는지 확실하지 않습니다. 그래서 "box-sizing : border-box;"를 추가 할 수 있습니다. 너의. 첫 번째, 두 번째. .third div의 CSS.

예 : http://jsfiddle.net/SZjJG/17/