html - 使容器内的正确 div 响应

Question

我在容器中有 2 个 div，一个在中间，一个在右边。我希望右侧 div 的宽度能够响应。目前，只有居中的 max-width 有效。

查看此 jsFiddle .

如何让正确的 div 也响应？

HTML:

<div id="container">

    <div id="middle">Centered</div>

    <div id="right">Make me responsive</div>

</div>

CSS:

#container {
    width: 100%;
    text-align: center;
    position: relative;
}

#middle {
    background: #ddd;
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width:300px;
    height:300px;
    display: inline-block;
    vertical-align: top;
}

#right {
    background:yellow;
    width:100%;
    max-width:300px;
    display: inline-block;
    vertical-align: top;
    position: absolute;
}


@media screen and (max-width: 350px) {
    #right {
        display: none;
    }
}

Answer 1

想法是使用flexbox .并为左列添加一个伪元素，以便使用您现有的标记使中间的元素位于中心。

JSFiddle Demo

#container {
    display: flex;
}
#container:before, #middle, #right {
    border: 1px solid red;
    flex: 1 1 0;
}
#container:before {
    content:"";
}
#middle {
    max-width: 100px;
}

<div id="container">
    <div id="middle">Centered</div>
    <div id="right">Responsive</div>
</div>