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

Question

当前代码如下:

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>

这就是我想要的安排方式。同一行的偏斜应该是相反的。

Answer 1

不确定这是不是你想要的，但我只是按照图片做的一样。我为每一行添加了一个 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>