文字右旋转和右对齐

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

只需使用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>

Answer 2

您可以旋转90度（而不是-90度），然后将其余部分保持为Rotate -l <​​/ p>

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

Answer 3

将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>