html - 如何将 figcaption 从图中垂直放置？

Question

我有一个带有图形说明的图形。我想将 figcaption 放在 figure img 旁边，如下图所示。

我已经尝试过转换 rotate 和 origin 之类的方法，但问题似乎在于它不适合父对象的新高度/宽度。

http://codepen.io/Caspert/pen/eWEvvL

Answer 1

您添加 position: relative 和 top: 和 left: 属性值给您的 figcaption 类。

注意:如果您想要一致的结果，图像和标题必须始终具有相同的大小等。此外，没有任何地方可以调整屏幕大小导致 block 四处移动。您需要解决此问题以提高响应能力，但这是基本思想。

figure {
  margin-top: 100px;
  position: relative;
}

figcaption {
  position: relative;
  background: rgba(255,0,0,0.6);
     -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
   left: 280px;
   top: -102px;

/*   transform-origin: 100% 25px; */
}

figcaption p {
}

<div class="container">

  <div class="row">
    <figure class="col-md-6">
      <img src="http://placehold.it/540x360" alt="Gear">
      <figcaption class="dash-holder vertical">
        <p>Gear</p>
      </figcaption>
      <!-- End figcaption.vertical -->
    </figure>
    <!-- End figure.col-md-6 -->
  </div>


</div>

http://codepen.io/illdapt/pen/KmvWEx