文本右旋转和右对齐

Question

我需要做那样的事情。

但是我不知道怎么把text2右对齐

<div class="main-wrapper">
  <div class="row">
    <div class="col-md-2">
        <div class="outer outer-l rotate-l">
            <p>text1</p>
        </div>
    </div>
    <div class="col-md-8">
        <div class="image-container">
            <img src="">
        </div>
   </div>
    <div class="col-md-2">
        <div class="outer outer-r rotate-r">
            <p>text2</p>
        </div>
    </div>
  </div>
  </div>

.main-wrapper {height: 100vh;}

.outer {
    position: relative;
    display: inline-block;
    top: 50%;
}

.rotate-l {
    transform:  translateX(-50%) translateY(0) rotate(-90deg);
}

.rotate-r {
}

我应该如何处理 .rotate-r 的翻译？

Answer 1

你可以只旋转 90 度（而不是 -90 度），其余的保持像 rotate-l

.rotate-r {
    transform:  translateX(-50%) translateY(0) rotate(90deg);
}

Answer 2

第二个内容transform: rotate(90deg);使用

.main-wrapper {height: 100vh;}

.outer {
    position: relative;
    display: inline-block;
    top: 50%;
}

.rotate-l {
    transform:  translateX(0%) translateY(0) rotate(-90deg);
}

.rotate-r {
    transform: rotate(90deg);
}

.col-md-8{background-color: black;
    height: 250px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="main-wrapper">
  <div class="row">
    <div class="col-md-2">
        <div class="outer outer-l rotate-l">
            <p>text1</p>
        </div>
    </div>
    <div class="col-md-8">
        <div class="image-container">
            <img src="">
        </div>
   </div>
    <div class="col-md-2">
        <div class="outer outer-r rotate-r">
            <p>text2</p>
        </div>
    </div>
  </div>
  </div>

Answer 3

只需将第二个内容旋转 90deg 并使用 float:right;

试试这个

.main-wrapper {height: 100vh; width:100%;}

.outer {
    position: relative;
    display: inline-block;
    top: 50%;
    float: left;
}

.image-container{text-align:center;}
.rotate-l {
    transform:  translateX(-50%) translateY(0) rotate(-90deg);
}
.rotate-r {
  transform:  translateX(-50%) translateY(-16px) rotate(90deg);
  float: right;
}

<div class="main-wrapper">
  <div class="row">
    <div class="col-md-2">
        <div class="outer outer-l rotate-l">
            <p>text1</p>
        </div>
    </div>
    <div class="col-md-8">
        <div class="image-container">
            <img src="">
            blah blah blah
        </div>
   </div>
    <div class="col-md-2">
        <div class="outer outer-r rotate-r">
            <p>text2</p>
        </div>
    </div>
  </div>
  </div>

文本右旋转和右对齐

Text right rotation and right alignment

html

css

rotation