Question

我一直试图让这项工作连续两天......

我需要的是当div ex3中断时，div ex2会同时中断并使ex3更进一步。当ex3中断时，ex2应该放在ex1和ex3的中间，如下所示：

自：
ex1ex2ex3

于：
EX1
EX2
EX3

...但我能够接受的最远的是： EX1
ex2ex3

我希望自己足够清楚......

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

我应该补充一点，你需要知道这在旧版本的ie。

中不起作用

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

1 个答案: