如何在 visual composer WordPress 中将四个盒子排成两行而没有任何间隙？

Question

我想把四个盒子排成两行。两行之间不会有 padding/gap。整个部分将被拉伸。

方框示例如下：

如何获得这个？请帮忙。提前致谢。

Answer 1

您可以在 VC 中添加 CUSTOM HTML 模块，然后使用 flex

html, body {
  height: 100%;
  margin: 0;
}
.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 0px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.box { margin: 0px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }

<div class="grid2x2">
  <div class="box box1"><div>one</div></div>
  <div class="box box2"><div>two</div></div>
  <div class="box box3"><div>three</div></div>
  <div class="box box4"><div>four</div></div>
</div>

如何在 visual composer WordPress 中将四个盒子排成两行而没有任何间隙？

How to make four boxes in two rows without any gaps in visual composer WordPress?

css

wordpress

visual-composer