html - 如何在同一行中排列两个具有不同ID的div？

当前代码如下：

div {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px transparent;
}

div#myDiv1 {
  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  -webkit-transform: matrix(1, 0.3, 0, 1, 0, 0);
}

<div id="myDiv1">
  <p class="mt15 colorc1 center font16">a</p>
</div>
<div id="myDiv2" class="right">
  <p class="mt15 colorc1 center font16">b</p>
</div>
<div id="myDiv1">
  <p class="mt15 colorc1 center font16">c</p>
</div>

这就是我要安排的方式。同一行中的歪斜应该彼此相对。

最佳答案

不确定这是否是您想要的，但是我只是做了与图像相同的操作。我为每行添加了wrapper，并添加了一些CSS以使divs内联

div {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px transparent;
  text-align: center;
}

.wrapper {
  display: inline;
}

div#myDiv1 {
  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
  display: inline-block;
}

div#myDiv2 {
  -webkit-transform: matrix(1, 0.3, 0, 1, 0, 0);
  display: inline-block;
}

div#myDiv3 {
  -webkit-transform: matrix(1, 0.3, 0, 1, 0, 0);
}

<div class="wrapper">
  <div id="myDiv1">
    <p class="mt15 colorc1 center font16">a</p>
  </div>
  <div id="myDiv2" class="right">
    <p class="mt15 colorc1 center font16">b</p>
  </div>
</div>
<div class="wrapper">
  <div id="myDiv3">
    <p class="mt15 colorc1 center font16">c</p>
  </div>
</div>