html - 响应式 Div 布局重排

Question

我一直在为一家本地公司独立设计网站，并且一直在研究如何使我的布局/设计能够响应式工作。截至目前，我的内容与此类似:

但是，随着浏览器屏幕变小，或者如果浏览器的分辨率已经降低，元素 3 将移动到元素 1 和元素 2 的下方，宽度为 100%。而元素 1 和元素 2 将相互内联。很像这样:

最初，我将包装 div(1 和 2)都设置为 display: inline-block。但是我找不到任何类型的研究表明(在相应的媒体查询中更改内联 block div 容器 2 之后)子元素可以与单独的元素内联，而同一容器中的另一个子元素则不会。最近，我开始讨论使用 display: table 、 display: table-row 和 display: table-cell 来尝试以类似表格的布局组织内容，但我找不到将元素 1 和元素 2 分配到它们自己的行中同时排除元素 3 的方法。

老实说，我已经有一段时间没有处理任何 HTML/CSS/JavaScript/等等，所以我有点生疏了。我希望看看是否有人能指出我正确的方向或给我一些见解。谢谢。

Answer 1

我使用了带有基本 div 的流体设计，您可以在这里看到 https://jsfiddle.net/74x5975j/6/

<div class="group">
    <div class="box-1">BOX 1</div>
    <div class="box-2">BOX 2</div>
    <div class="box-3">BOX 3</div>
</div>

这是带有媒体查询的 CSS:

.group {
width: 600px;
height: 300px;    

}
.box-1 {
    width: 50%;
    height: 100%;
    float: left;
    background-color: gray;
    text-align: center;
    float: left; 
}
.box-2 {
    width: 50%;
    height: 50%;
    float: left;
    background-color: blue;
    text-align: center;
    float: left;    
}

.box-3 {
    width: 50%;
    height: 50%;
    float: left;
    background-color: red;
    text-align: center;
    float: left;    
}
@media only screen and (max-width: 599px){
.group {
    width: 100%;
    height: 450px;    
}
.box-1 {
    height: 66.666%;
}
.box-2 {
    height: 66.666%;  
}

.box-3 {
    width: 100%;
    height: 33.333%;
}
}