使水平对齐的div在分页符上垂直对齐

Question

我已经试着让它工作了两天了。。。

我需要的是，当div ex3断开时，div 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;
}

这就是我认为你在之后的样子

这是一个显示的JSFIDDLE

编辑在你的评论说出你的意思后，我使用css媒体查询编辑了代码

@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

我需要补充的是，您需要注意，这在旧版本的即中不起作用。