如何使用CSS实现这种复杂的布局？

Question

我有这个（显然）简单的布局：

那里有很多技术，但我找不到能满足所有要求的技术。你能指点我正确的方向吗？

编辑：我需要将我的布局设为100％的父级，然后在小屏幕上回到div（或td）之下。 See my fiddle.
我需要排水沟。

表

一块蛋糕，当然，多亏了rowpan和colspan。它很容易流动。但是，无法使用媒体查询来更改小屏幕的显示。

编辑：实际上，媒体查询适用于td。我只是在小屏幕上将其设置为display:block，我们就在这里。 This is my working fiddle。但是你知道，“桌子很糟糕”......

浮

我甚至没有尝试过。你觉得我应该有吗？

imbricated div's

这是不可能叠加的。我可以使用绝对定位，但它不再是流畅的

Flexbox的

每次我尝试使用flexbox时，都会头疼。但如果我没错，我们不能同时拥有rowpan和colspan。

css网格布局

这是好消息。也许这是形而上学的。

Answer 1

我说浮动是最简单的方法，蓝色的position:relative和top:-x%（x基于框的百分比）。

<强> HTML：

<div class="container">
    <div class="red portrait"></div>
    <div class="green landscape"></div>
    <div class="yellow landscape"></div>
    <div class="blue portrait"></div>
</div>

<强> CSS：

.container {
    width:300px;
    height:200px;
}

.container div {
    float:left;
}

.red {
    background-color:#e23812;
}

.yellow {
    background-color:#e2df00;
    clear:both;
}

.green {
    background-color:#28a837;
}

.blue {
     background-color:#224395;  
    position:relative;
    top:-20%;
}

.portrait {
    width:40%;
    height:60%;
}
.landscape {
    width:60%;
    height:40%;
}

JSFiddle demo

Answer 2

我在这个问题上的两分钱，使用了一些flexbox而没有浮动。

查看我的fiddle。

这将是一步一步的方法：

1. 我们创建一个容器盒来处理我们的设计（200px×300px）

2. 我们使用flexbox创建一个2×2的盒子（中间没有洞）。 Flexbox有助于创建两行，每行只使用move .\file_name .\%file_name%分成两列（它将在一行中分配div，当它太窄时将其余部分包装成一个新行）。

3. 在我们的案例中，我们需要微调flex-flow: row wrap和.landscape div以适合所需的比例（40％和60％的宽度或高度，具体取决于具体情况）。由于60％+ 40％将始终占据100％，我们可以确保.portrait属性将其他两个div包装成一个新行，本身也适合100％。

4. 在这个阶段，除了与黄色正确对齐的蓝色div外，形状看起来还不错。

5. 我们只是通过将基本的重新flex-flow应用于蓝色div来纠正上述要点

Answer 3

我刚刚在这里做了一个提琴手链接

https://jsfiddle.net/48L7btg6/5/

我把它分成两部分：   - 第1部分：红色和绿色的数字   - 第2部分：绿色和蓝色的数字 得到了第2部分

position:absolute;
left:150px(or whatever you want);
top:0px(just in case?);

你已经完成了