html - 无需编辑 html 的两个 div 的 Css 包装

Question

我有一个包含三个 div 的 display flex，它是一个组件，但我无法编辑它，因为它在多个团队之间共享。

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

我只需要更新 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>