Ausrichten vertikaler Text neben dem Bild

Ich versuche genau das zu erstellen, was in dem Bild unten gezeigt wird. Bis jetzt sieht es nicht gut für mich aus.Ausrichten vertikaler Text neben dem Bild

Hier ist der 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; 
}

Wie kann ich diesen gewünschten Effekt zu erzielen tun? Zu Ihrer Information: Ich arbeite am Bootstrap-Framework.

Quelle

2017-07-04 Elaine Byene

Sie können die Positionierung von .services__text ändern und dann unter Verwendung von translate das vor image ausrichten.

.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>

Quelle

2017-07-04 05:06:40 frnt

Die Ausrichtung ist aus, wenn der Titel länger ist als "Titeltext hier". Und wenn es kürzer ist. – AJMaxwell

@AJMaxwell Überprüfen Sie diese jsFiddle https://jsfiddle.net/yLvvnr56/, das ist wahr müssen Breite hinzufügen.service__text, so dass es Text in der gleichen Position hält und so lange wie nötig hinzufügen kann, aber ich habe einen Überlauf hinzugefügt, der im übergeordneten Element versteckt ist. Wenn Sie also jsFiddle skalieren, sehen Sie, dass ein Teil des Textes ausgeblendet ist gleiche Position bei bestimmten Bildschirmauflösung OP muss Medienabfrage verwenden. Nun gab es zwei Möglichkeiten, dies entweder negativ links oder translate wie vorgeschlagen zu tun. Meistens funktioniert translate bei gedrehten Elementen gut. – frnt

Fügen Sie die folgenden CSS-Eigenschaften im Code für die Klasse .service_text

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

Und eine Klasse zu Ihrem class="col-xs-4" als class="col-xs-4 parent" Und für parent Add folgenden CSS hinzufügen. position: relative; padding-left: 8px;

Dies wird genau das gleiche Ergebnis geben. Und wenn Sie eine weitere Erklärung möchten, würde ich Ihnen gerne weiterhelfen.

Quelle

2017-07-04 05:17:13 Puneet

Diese Methode funktioniert mit jeder Länge von Text (solange es eine einzelne Zeile ist).

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

translate(-100%) bewegt die Elemente neue Position -100% seiner Breite in seine nach links (nach unten).
width:100%; gibt Ihren Titel Raum zu erweitern. Dies sind die Elemente Höhe.
text-align:right; schiebt den Text in die oben des Bildes
position:absolute; & left:-8px; schiebt den Text außerhalb des Bildes (möglicherweise überlappende andere Elemente)

Quelle

2017-07-04 05:22:05 AJMaxwell

Hey Champ, können Sie lösen Ihre Problem mit folgenden 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>

Quelle

2017-07-04 10:28:31

Danke. Ich habe den Code von rnt verwendet :) –

Ausrichten vertikaler Text neben dem Bild

Antwort

Verwandte Themen