html - 需要垂直文本从底部开始与横幅的左侧对齐

Question

我有一些文本想与我的横幅图片垂直对齐。 我希望文本从横幅图片的左下方开始。 我使用的是 Drupal，所以我必须在横幅图像 block 旁边添加一个文本 block 。

我希望它看起来像这样:

但是如果看起来像这样:

这是提供横幅/文本的网站:

Banner & Text Web Page

这是我用来使垂直文本与横幅左侧对齐的 css:

.vertical-text {
float: left;
transform: rotate(-90deg);
transform-origin: left bottom 0;

谁能帮我正确对齐文本？

谢谢，

大卫

Answer 1

测试这个:

.vertical-text {
  float: left;
  transform: rotate(-90deg);
  transform-origin: left bottom 0;
  margin-right:-30px; //or change it until be that you want 
  margin-bottom:-100px; 
}

编辑

#header-image{
  position:relative;
  width:700px;
  height:300px;
  // ...
 }
.vertical-text {
   position:absolute;
   bottom:0;
   left:-20px;
   transform: rotate(-90deg);
   transform-origin: left bottom 0;
}


 <div id="header-image">
    <div class="vertical-text"></div>
 </div>