Css包装两个div而不编辑html

Question

我有一个带有三个div的显示flex，它是一个组件，但我不能编辑它，因为它在多个团队之间共享。

我只能更新CSS，第一部分是实际布局，第二部分是预期布局。

只有CSS我需要更新：

<div class="flex">
<div class="square blue">
x
</div>
<div class="square red">
x
</div>
<div class="square yellow">
x
</div>
</div>

要获得第二个html渲染的结果(请参阅JSFiddle(：

<div class="flex">
<div class="square blue">
x
</div>
<div class="square">
<div class="square red">
x
</div>
<div class="square yellow">
x
</div>
</div>
</div>

https://jsfiddle.net/h8o523tL/33/

Answer 1

你可以使用CSS网格，你会得到你想要的布局：

.flex {
display: grid;
grid-template-areas: 
"blue red" 
"blue yellow";
}
.blue {
grid-area: blue;
background-color: blue;
}
.red {
grid-area: red;
background-color: red;
}
.yellow {
grid-area: yellow;
background-color: yellow;
}

<div class="flex">
<div class="square blue">
x
</div>
<div class="square red">
x
</div>
<div class="square yellow">
x
</div>
</div>

更新

要获得更多浏览器支持，您可以尝试以下操作：

.flex {
position:relative;
overflow:hidden;
}
.blue {
position:absolute;
height:100%;
top:0;
left:0;
width:50%;
background-color: blue;
}
.flex:before {
content:"";
min-height:1px;
width:50%;
float:left;
}
.red {
background-color: red;
width:50%;
float:left;
}
.yellow {
background-color: yellow;
width:50%;
float:right;
}

<div class="flex">
<div class="square blue">
blue
</div>
<div class="square red">
red
</div>
<div class="square yellow">
yellow
</div>
</div>