2
Mit dem Bootstrap habe ich drei Spalten erstellt, die jeweils ein Bild und eine Beschriftung enthalten. Wie so:Wie ordne ich ein Bild und seine Beschriftung horizontal in 3 Spalten an?
Allerdings möchte ich es tatsächlich Ausgabe der Inhalt wie folgt aus:
Dies ist meine aktuellen Code:
<!-- Section 6 -->
<div class="cssSection cssCenter">
<div class="container">
<h2>The Order</h2>
<br>
<p class="cssInformation">Labelled as a religious order, the Knights Templars established a set of rules by which their members would follow.</p>
<br>
<div class="row">
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars swore to an oath of poverty, chastity, obedience and renounced the world.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars lived within their own community, which meant sleeping in a common dorm, while also eating their meals in union. Lorem ipsum sont dolor sit amet. Lorem ipsum sont dolor sit amet.Lorem ipsum sont dolor sit amet.</p>
</div>
<div class="col-sm-4">
<img class="img-center img-responsive" src="http://placehold.it/400x275">
<br>
<p>The Templars refrained from becoming drunk, gambling and swearing</p>
</div>
</div>
</div>
</div>
Und hier ist der zugehörige CSS-Code:
.cssSection {
padding: 45px 0 30px;
}
.cssCenter {
text-align: center;
}
.cssInformation {
font-size: 18px;
}
Was kann ich innerhalb der HTML- und/oder CSS-Einstellungen anpassen, um die p-Tags horizontal auszurichten, ohne die Bilder zu beeinflussen?
Vielen Dank im fortgeschrittenen
Versuchen Sie und fügen Sie hinzu "display: flex; align-items: stretch;" zur .row-Klasse. –
@ThomasByy Danke, dass der Trick –
mögliche Anleitung: http://StackOverflow.com/q/37442430/3597276 –