Question

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

左div 需要响应最大宽度为597px宽。它包含一个使用宽度：100％的图像，因此当左列收缩时它会收缩，但是597px宽是图像的最大尺寸。

右div 需要能够完成两件事......如果有房间，请完全使用容器中左侧div未使用的剩余空间......但是，如果窗口的尺寸较小且右边的div小于250px的容器空间，则在左边的div旁边我需要它继续前进并将其自身移动到左边的div下方并使其宽度为100％。

编辑 - 我刚想到的另一件事......保持左边的div不会使图像太小，当左图像低于最大宽度597px时，我需要方面两个div之间的比例在左边是60％，在右边是40％。

我想使用@media（min-width：xx）{命令在这里会有很大帮助......看起来Bootstrap正在改变最小宽度的容器大小：506px，min-width：768px和min -width：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 的类，右边有 .WPProductCRight 。救命？

感谢阅读！

Answer 1

嗯，在更多地摆弄代码之后，我似乎想通了。

@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来填充其余部分。使用媒体最小高度，我能够操纵两个div，以根据该范围内的容器divs大小自行调整大小。不是最漂亮的代码，但它有效。

Answer 2

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

首先让我们找到：

如果窗口尺寸较小而右边的div小于250px 左侧div旁边的容器空间我需要它去向前移动并将其自身移动到左侧div下方并使其100％宽度。

此时右div 有width: 40%所以我们要做的就是找到右div 宽度为0时的总宽度250px，我们可以使用交叉产品：250 * 100/40 = 625 ，现在我们有了第一个断点。

让我们找到第二个：

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

相同的左div 有width: 60%现在我们想要597px时的总宽度，所以597 * 100/60 = 995 就在这里是我们的第二个突破点。

现在让我们使用它们：

＆＃13;

.WPProductCLeft,
.WPProductCRight{
    float: left;
    height: 200px;
}
.WPProductCLeft{
    width: 60%;
    max-width: 597px;
    background: #f3f3f3;
}
.WPProductCRight{
    width: calc(100% - 597px); /*to use the rest of the space not used by the left div*/
    background: #BEECCD;
}
img{
    width: 100%;
    height: 100%;
}


@media (max-width: 995px){
    .WPProductCRight{
        width: 40%;  /*to set aspect ratio between the two divs to be 60% on the left, the 40% on the right.*/
    }
}
@media (max-width: 625px){
    .WPProductCLeft,
    .WPProductCRight{
        width: 100%;  /*left div to go ahead and move the right div underneath the left div and make it 100% width.*/
    }
}

＆＃13;

<div>
    <div class="WPProductCLeft"><img src="https://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt=""></div>
    <div class="WPProductCRight"></div>
</div>

＆＃13;

上面的代码片段只是为了说明我认为通过这种方式你可以更好地理解它，现在让我们先使用移动设备以正确的方式做到这一点：

这是一个与

一起工作的JSFiddle

＆＃13;

body{
    margin: 0;
}
.WPProductCLeft,
.WPProductCRight{
    float: left;
    height: 200px;
    width: 100%;  /*left div to go ahead and move the right div underneath the left div and make it 100% width.*/
}
.WPProductCLeft{
    background: #f3f3f3;
}
.WPProductCRight{    
    background: #BEECCD;
}
img{
    width: 100%;
    height: 100%;
}


@media (min-width: 626px){ /*to set aspect ratio between the two divs to be 60% on the left, the 40% on the right.*/
    .WPProductCLeft{
        max-width: 597px;
        width: 60%;
    }
    .WPProductCRight{
        width: 40%;  
    }
}
@media (min-width: 996px){
    .WPProductCRight{
        width: calc(100% - 597px); /*to use the rest of the space not used by the left div*/
        
    }
}

＆＃13;

<div>
    <div class="WPProductCLeft"><img src="https://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt=""></div>
    <div class="WPProductCRight"></div>
</div>

＆＃13;

两个响应式DIV，在最大宽度处剩下最大值，右边是剩下的吗？

2 个答案: