イメージの横に縦のテキストを並べ替えます

Question

私は下の図のように作成しようとしています。これまでのところ、それは私のために良く見えません。

ここJSFiddleです：https://jsfiddle.net/6o3nz6g9/

HTML：

<h1>This is Sparta!</h1> 
<div class="container"> 
<div class="row"> 
    <div class="col-xs-4"> 
     <div class="services__text">Title Text Here</div> 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/> 
    </div> 
    <div class="col-xs-4"> 
     <div class="services__text">Title Text Here</div> 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/> 
    </div> 
    <div class="col-xs-4"> 
     <div class="services__text">Title Text Here</div> 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/> 
    </div> 
</div> 
</div> 

CSS：

.services__text { 
    -ms-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    -ms-transform-origin: right top 0; 
    -moz-transform-origin: right top 0; 
    -webkit-transform-origin: right top 0; 
    transform-origin: right top 0; 
    padding: 10px; 
    float: left; 
} 

どのように私は、この所望の効果を得るために行うのですか？参考：私はBootstrapフレームワークに取り組んでいます。

Answer 1

.services__textの位置を変更し、次にtranslateを使用して、imageの前に揃えることができます。

.services__text { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    transform: rotate(-90deg) translate(-40%, -200%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<h1>This is Sparta!</h1> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div class="services__text">Title Text Here</div> 
 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="services__text">Title Text Here</div> 
 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="services__text">Title Text Here</div> 
 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

クラス.service_text

top:20px; left:-126px; position:absolute; 

のためにあなたのコードで以下のCSSプロパティを追加し、 class="col-xs-4 parent"ようとCSS次parentアドオンのためにあなたのclass="col-xs-4"にクラスを追加します。 position: relative; padding-left: 8px;

これは全く同じ結果を与えます。さらに詳しい説明が必要な場合は、そのことをお手伝いしたいと思います。

Answer 3

この方法は、1行であればどんな長さのテキストでも機能します。

.services__text { 
    position:absolute; 
    transform: rotate(-90deg) translate(-100%); 
    transform-origin: left top; 
    width:100%; 
    left:-8px; 
    text-align:right; 
} 

• translate(-100%)（下）の左側に要素をその幅の100％を新しい位置に移動させます。
• width:100%;あなたのタイトルルームを拡張します。これは、要素の高さです。
• text-align:right;
は画像
• position:absolute; & left:-8px;のトップにテキストをプッシュし、画像の外にテキストをプッシュ（おそらく重複他の要素）

Answer 4

チャンプねえ、あなたが解決することがありますCSS

.services__text { 
 
    position: absolute; 
 
    text-align: right; 
 
    -moz-transform: rotate(-90deg) translate(-100%, -100%); 
 
    -webkit-transform: rotate(-90deg) translate(-100%, -100%); 
 
    -o-transform: rotate(-90deg) translate(-100%, -100%); 
 
    -ms-transform: rotate(-90deg) translate(-100%, -100%); 
 
    transform: rotate(-90deg) translate(-100%, -100%); 
 
    -ms-transform-origin: left top; 
 
    -webkit-transform-origin: left top; 
 
    transform-origin: left top; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<h1>This is Sparta!</h1> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div class="services__text">Title Text Here</div> 
 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="services__text">Title Text Here</div> 
 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="services__text">Title Text Here</div> 
 
     <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> 
 
    </div> 
 
    </div> 
 
</div>

を次のように問題