Question

我必须在一个盒子的两侧创建2个垂直标题。我已经成功创建了正确的动态内容。问题出在左侧。与右侧标题不同，当我们在左侧更改内容时，它会向侧面移动。另外，当我向其中添加left: 0rem代码时，它并没有移到最左端。

.section {
  padding: 4.5rem 3rem;
  font-size: 1.125rem;
}

.section .section-heading-vertical {
  position: absolute;
  right: 4rem;
  top: 0;
  font-size: 0.9375rem;
  margin: 0;
  z-index: 1;
  letter-spacing: 0.4rem;
  padding-right: 9.375rem;
  -moz-transform-origin: right top 0;
  -o-transform-origin: right top 0;
  -ms-transform-origin: right top 0;
  -webkit-transform-origin: right top 0;
  transform-origin: right top 0;
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.section .section-heading-vertical:before {
  content: "";
  width: 1px;
  height: 8rem;
  background-color: #333;
  position: absolute;
  top: 50%;
  right: 8rem;
  -moz-transform-origin: right top 0;
  -o-transform-origin: right top 0;
  -ms-transform-origin: right top 0;
  -webkit-transform-origin: right top 0;
  transform-origin: right top 0;
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.section-heading-vertical.on-left {
  left: 4rem;
  right: inherit;
}

<div class="section">
  <h3 class="section-heading-vertical on-left">Left Header</h3>
  <h3 class="section-heading-vertical">Right Header</h3>
</div>

Answer 1

我使用writing-mode: tb-rl;和display: flex;进行了一些更改。试试下面的代码片段。我希望这就是您要寻找的。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  display: flex;
  justify-content: space-between;
  font-size: 1.125rem;
}

.section .section-heading-vertical {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  top: 0;
  font-size: 0.9375rem;
  margin: 0;
  letter-spacing: 0.4rem;
  transform: rotate(-180deg);
  writing-mode: tb-rl;
}

.section .section-heading-vertical:after {
  content: "";
  width: 1px;
  height: 8rem;
  background-color: #333;
  margin-top: 25px;
}

.section-heading-vertical.on-left {
  left: 0rem;
}

.section-heading-vertical.on-right {
  right: 0rem;
}

<div class="section">
  <h3 class="section-heading-vertical on-left">Left Header</h3>
  <h3 class="section-heading-vertical on-right">Right Header</h3>
</div>

向左垂直航向离子CSS问题

1 个答案: