如何从图中定位无花果垂直右侧？

Question

我有一个与figcaption的数字。我想将figcaption放在img的旁边，如下图所示。

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

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

希望有一个简单的解决方案，以实现以下目标：

Answer 1

您与重视你figcaption类top:和left:属性添加position: relative。

注意：如果要获得一致的结果，图像和标题的大小必须始终相同。此外，屏幕大小调整不会导致块移动。你需要解决这个问题的响应性，但这是基本的想法。

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

Answer 2

你可以使用Flexbox的定位和transform-origin来控制旋转的元素。您也可以使用保证金DEMO从图底部开始修改figcaption的头寸。

figure { 
 
    margin-top: 100px; 
 
    position: relative; 
 
    align-items: flex-end; 
 
    display: flex; 
 
} 
 
figcaption { 
 
    background: rgba(255, 0, 0, 0.6); 
 
    transform: rotate(90deg); 
 
    transform-origin: top right; 
 
} 
 
figcaption p { 
 
    margin: 0; 
 
}

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