Question

我有一张由divs在引导程序上制成的表。我想在第一列上将文本设为垂直（方向-90deg）。我能够成功地打开文本，但是如果文本较长，则会失去位置。

它总是显示为以下屏幕截图：https://ibb.co/2s8dzyZ

我尝试了几种在网络上发现的技术，但似乎都无法解决我的问题。

.horizontal-pricing {
  min-height: 250px;
  position: relative;
}

.verticaltext {
  transform: rotate(-90deg);
  transform-origin: right, top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: right, top;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: right, top;
  position: absolute;
  font-family: 'Montserrat-SemiBold', sans-serif;
  font-size: 20px;
  color: #3c99ef;
  margin-top: 100px;
}

<div class="container purple-accent">
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Light 1</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Light 2</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Professional 1</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Professional 2</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Performance 1</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Performance 2</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>

我希望文本在白框的中间垂直对齐，并在左侧20px处。

Answer 1

使用writing-mode

.verticaltext {
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
}

.row {
  border: 1px solid green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container purple-accent">
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Light 1</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Light 2</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Professional 1</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Professional 2</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Performance 1</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Performance 2</div>
        </div>
      </div>
      <div class="col-sm-8 col-md-8">
        <div>
          <div>bla bla bla</div>
        </div>
      </div>
    </div>
  </div>

Codepen Demo

Answer 2

您真的要关闭import 'bootstrap/dist/css/bootstrap.css';而没有内容，然后在<div class="col-sm-4 col-md-4"><div>之后关闭<div class="pricing-box horizontal-pricing">，然后又关闭该行吗？

<div class="verticaltext">Light 1</div>

根据您的格式，我认为这将是您想要的更多内容：

<div class="container purple-accent">
  <div class="row">
    <div class="pricing-box horizontal-pricing">  

//THINK ABOUT THIS PART OUF YOUR CODE
<div class="row">
    <div class="pricing-box horizontal-pricing">
      <div class="col-sm-4 col-md-4">
        <div>
          <div class="verticaltext">Light 1</div>
        </div>
      </div>

如何在div上正确放置垂直方向的文本？

2 个答案: