在容器内做出响应的右div [英] Make right div within container responsive

问题描述

我有一个容器中有两个div，一个在中心，一个在右边。我想要右侧div的宽度响应。目前，只有在中心的一个 max-width 工作。

I have 2 divs in a container, one in the center and one to the right. I want the width of the right div to be responsive. Currently, only the max-width on the centered one works.

查看此 jsFiddle 。

如何使正确的div响应？

How do I make the right div responsive too?

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

推荐答案

想法是使用 flexbox 。

JSFiddle演示

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>

这篇关于在容器内做出响应的右div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！