Html 两个反应灵敏的div，左边最大宽度，右边取其余的？

我有一个问题，这个问题和很多其他问题类似，但比我能找到的复杂一点。我有两个DIV列，我希望它们都响应它们所在的容器（使用引导根据浏览器大小更改容器宽度）

左div需要最大宽度为597px的响应。它包含一个宽度为100%的图像，因此它会随着左列的缩小而缩小，但597px宽是图像的最大大小

右div需要能够做两件事。。。如果有空间，充分利用容器中左div未使用的剩余空间。。。但是，如果窗口的大小较小，并且当靠近左分区时，右分区剩下的容器空间小于250px，我需要它继续前进，并将其自身移动到左分区下面，使其100%宽度

编辑-我刚刚想到的另一件事。。。为了防止左div使图像太小，当左图像低于最大宽度597px时，我需要两个div之间的纵横比在左侧为60%，在右侧为40%

我认为在这里使用@media（minwidth:xx）{命令会有很大的帮助…看起来引导程序正在更改容器大小，最小宽度为506px、最小宽度为768px和最小宽度为992px

我最初试过百分比，但最终效果不好，当左div达到最大宽度时，右div没有占据房间的其余部分

@media (min-width: 506px){
    .WPProductCLeft {     
        position: relative;
        padding-right: 15px;
        padding-left: 15px; }
    .WPProductCRight { 
        position: relative;
        padding-right: 15px;
        padding-left: 15px; }
    }
@media (min-width: 768px){
    .WPProductCLeft { width: 66.66666667%; max-width: 597px; }
    .WPProductCRight { width: 33.3%;; }
    }
@media (min-width: 992px){
    .WPProductCLeft { width: 597px; }
    .WPProductCRight { width: 39%; }
    }

显然，左边的div有.WPProductCLeft类，右边的div有.WPProductCRight类。帮助

---

谢谢你的阅读！

嗯，在对代码进行了大量修改之后，我似乎明白了

@media (min-width: 506px){
    .WPProductCLeft { 
        margin:auto;  
        position: relative;
        padding-right: 15px;
        padding-left: 15px;
    }
    .WPProductCRight { 
        margin:auto;
        position: relative;
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media (min-width: 768px){
    .WPProductCLeft {
        width: 60%;
        float: left;
        padding-right: 15px;
        padding-left: 15px; 
    }
    .WPProductCRight {
        width: auto;
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media (min-width: 992px){
    .WPProductCLeft {
        width: 597px;
        float: left;
        padding-right: 0px;
        padding-left: 0px; 
    }
    .WPProductCRight {
        width: auto; 
    }
}

---

诀窍是使用width:auto，这产生了很大的不同。我甚至没有意识到css中可以有一个自动宽度。由于容器宽度是根据浏览器宽度由引导预定义的，所以控制左div是最大的关键，而让右div用auto填充其余部分。使用media min height，我是能够操纵两个div，根据该范围内的容器div大小自动调整大小。这不是最漂亮的代码，但它可以工作。

要想在这种情况下更好地使用媒体查询，我们必须知道哪些是断点，所以让我们做一个简单的数学来找到它们

首先让我们来看看：

如果窗口尺寸较小，且右侧div小于250px 在左div旁边的容器空间中，我需要它 前进并将其自身移动到左div下方，使其100% 宽度

此时，右div有

宽度：40%

，所以我们要做的就是找到总宽度，当右div的宽度为250px时，我们可以使用叉积：250*100/40=625，现在我们有了第一个断点

让我们找到第二个：

左div需要响应最大宽度为597px的宽

同样的left div有

width:60%

现在我们想要的是当它有597px时的总宽度，所以应该是597*100/60=995，这是我们的第二个断点

现在让我们使用它们：

.WPProductCLeft，
.WPProductCRight{
浮动：左；
高度：200px；
}
.唇腭裂{
宽度：60%；
最大宽度：597px；
背景:#f3；
}
.WPProductCRight{
宽度：calc（100%-597px）；/*使用左div未使用的剩余空间*/
背景：#beecd；
}
img{
宽度：100%；
身高：100%；
}
@介质（最大宽度：995px）{
.WPProductCRight{
宽度：40%；/*将两个div之间的纵横比设置为左侧60%，右侧40%*/
}
}
@介质（最大宽度：625px）{
.wp.cleft，
.WPProductCRight{
宽度：100%；/*left div继续，将右div移动到左div下方，使其为100%宽度*/
}
}