Question

我在这个小提琴中向右移动时遇到问题。 fiddle。
问题是当我减小浏览器宽度时，右侧定位的标题会越过左侧的文本。我希望标题保持原样，而不设置divs的固定宽度。

＆＃13;

.v-directed-heading-right {
  width: 100px;
  position: absolute;
  right: 0;
  transform: rotate(90deg);
  transform-origin: 80px 80px;
  font-size: 18px;
  font-weight: bold;
}

.border-right {
  position: relative;
  padding: 20px 40px;
  width: 100%;
  border: 1px solid #eee;
  margin-top: 20px;
  margin-bottom: 20px;
  border-image: linear-gradient(to right, transparent 70%, #999 70%) 20;
  text-align: right;
}

.section {
  position: relative;
  padding: 10% 7%;
}

＆＃13;

<div class='section education '>
  <h2 class='v-directed-heading-right'> EDUCATION </h2>
  <div class='border-right'>
    <p>
      This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This
      testing text.This testing text.This testing text.This testing text
    </p>
  </div>
</div>

＆＃13;

Answer 1

这是你想要的吗？

.border-right {
  position: relative;
  padding: 20px 40px;
  width: 100%;
  border: 1px solid #eee;
  margin-top: 20px;
  margin-bottom: 20px;
  border-image: linear-gradient(to right, transparent 70%, #999 70%) 20;
  text-align: right;
  box-sizing: border-box;
}
.section {
  position: relative;
  padding: 10% 7%;
}
.v-directed-heading-right {
  width: 100px;
  position: absolute;
  top: -16px;
  right: 30px;
  transform: rotate(90deg);
  transform-origin: 80px 80px;
  font-size: 18px;
  font-weight: bold;
}

<div class="section education ">
    <div class="border-right">
        <p> This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text. This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text.This testing text </p>
        <h2 class="v-directed-heading-right"> EDUCATION </h2>
    </div>
</div>

定位垂直向右

1 个答案: