我有一个由divs 在引导程序上制作的表格。我希望第一列的文本是垂直的(方向 -90 度(。我能够成功地翻转文本,但是,如果文本更长,它会失去位置。
它总是像以下屏幕截图一样显示: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。
使用 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>
代码笔演示
你真的想在没有内容的情况下关闭<div class="col-sm-4 col-md-4"><div>
,然后在<div class="verticaltext">Light 1</div>
之后关闭<div class="pricing-box horizontal-pricing">
,之后已经关闭了行??
<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 class="row">
<div class="pricing-box horizontal-pricing">
<div class="col-sm-4 col-md-4">
<div class="verticaltext">Light 1</div>
</div>
</div>
more div's inside row here