製作水平排列的div上分頁符

Question

我一直在努力使這項工作現在看兩天......

我需要的是當DIV EX3休息，同時格EX2休息，使垂直對齊ex3更進一步。含義時EX3休息，EX2應放置在EX1和EX3中間是這樣的：

來自：
ex1ex2ex3

到：
EX1
EX2
EX3

...但最遠我能拿到它是這樣的：
ex1
ex2ex3

我希望我都說明白了...

http://jsfiddle.net/60Ludm5m/5/

HTML：

<div id="ultimatebreak"> 
    <div id="ex1"></div> 
    <div id="breaker"> 
    <div id="ex2"></div> 

<div id ="ex3"> 
</div> 

CSS：

#ex1, #ex2{ 
    height:100px; 
    width:100px; 
    margin:0px 5px 5px 0px; 
    background:#000000; 
    float:left; 
    display:inline; 
} 

#ex3 { 
    height:100px; 
    width:100px; 
    margin:0px 5px 5px 0px; 
    background:#000000; 
    float:left; 
    display:inline; 
    margin-right:0; 
} 

#breaker { 
    border:2px solid grey; 
    display:inline-block; 
    min-width:20%; 
} 

#ultimatebreak { 
    border:2px solid grey; 
    width:50%; 
    display:inline-block; 
} 

Answer 1

這是你所追求的？

#ex1, #ex2, #ex3{ 
    height:100px; 
    width:100px; 
    margin:0px 5px 5px 0px; 
    background:#000000; 
    float:left; 
    display:inline; 
} 

#breaker { 
    max-width:210px; 
    display:inline-block; 
} 

這做什麼，我覺得你是以後

這裏是在您的評論說你如何意味着它的工作我使用CSS媒體querys編輯的代碼後，

編輯一個JSFIDDLE

@media(min-width:320px){ 
    #ex1, #ex2, #ex3{ 
     height:100px; 
     width:100px; 
     margin:0px 5px 5px 0px; 
     background:#000000; 
     float:left; 
     display:inline; 
    } 
    #wrap{ 
     width:320px; 
    } 
} 
@media(min-width:110px) and (max-width:319px){ 
    #ex1, #ex2, #ex3{ 
     height:100px; 
     width:100px; 
     margin:0px 5px 5px 0px; 
     background:#000000; 
    } 
    #wrap{ 
     width:110px; 
    } 
} 

這是一個使用媒體查詢的css的JSFIDDLE

我應該補充說，你需要知道，這不適用於舊版本的ie。