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

我有一个带有figcaption的人物。我想将figcaption放置在图形img旁边，如下图所示。

我已经尝试过诸如transform rotate和origin之类的事情，但是似乎问题在于它不适合父对象的新高度/宽度。

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

最佳答案

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

注意：如果您想要一致的结果，则图像和标题必须始终具有相同的大小，依此类推。同样，没有任何位置可用于屏幕大小调整，导致块移动。您需要解决此问题以获得响应能力，但这是基本思想。

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

关于html - 如何从插图垂直放置figcaption？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43766959/