ich wende mich an euch da ich gerade nicht mehr weiter weiß und anscheinend ziemlich auf dem Schlauch stehe und daher Hilfe brauche..
Folgendes Szenario:
Im Body gibt es 2 Column, die jeweils mit Text gefüllt sind. Am Ende kommt jeweils ein Bild, welches ich gerne ausgerichtet haben möchte. Dann wieder jeweils Text, und wieder jeweils ein Bild. Rechts und Links funktioniert es wunderbar, nur leider sind sie in der Höhe nicht identisch. Habe mittlerweile gefühlt es mit display, float, div, margin, ect. probiert aber keine der Möglichkeiten hat funktioniert. Vielleicht übersehe ich auch einfach etwas?
Mit Besten Grüßen
CSS
/* Style the header */
/* Style Body */
/* Style Nav Bar */
/* Create two equal columns that floats next to each other */
.column_left {
float: left;
width: 28%;
margin-left: 20%;
}
.column_right {
float: right;
width: 28%;
margin-right: 20%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column_right, .column_left {
max-width: 100%;
}
}
/* Footer */
/* Img Ausrichtung über DIV*/
.img_pos {
padding: 70px 0;
}
/* Picture Size */
.img_size {
border-radius: 8px;
width: 100%;
position: relative;
vertical-align: text-bottom;
}
.img_reiter {
height: 100px;
margin-bottom: -20px;
}
Alles anzeigen
HTML
<!DOCTYPE HTML>
<html>
<!-- Body -->
<body>
<!-- Navigationsbar -->
<!-- Header Logo -->
<!-- Content 1-->
<div class="row">
<div class="column_left">
<img class="img_reiter" src="img/unserOel_450x120.jpg">
<p> HIER STEHT TEXT </p>
<div class="img_pos"><img class="img_size" src="img/pic01.jpg"></div>
</div>
<!-- Content Rechts -->
<div class="column_right">
<img class="img_reiter" src="img/Geschichte_320x120.jpg">
<p> HIER STEHT TEXT </p>
<div class="img_pos"><img class="img_size" src="img/pic02.jpg"></div>
</div>
</div>
<!-- Content 2 -->
<div class="row">
<div class="column_left">
<img class="img_reiter" src="img/Wirkungsweise_420x.jpg">
<p>HIER STEHT TEXT</p>
<div class="img_pos"><img class="img_size" src="img/pic03.jpg"></div>
</div>
<!-- Content Rechts -->
<div class="column_right">
<img class="img_reiter" src="img/Inhaltsstoffe_320x120.jpg">
<p>HIER STEHT TEXT</p>
<div class="img_pos"><img class="img_size" src="img/pic04.jpg"></div>
</div>
</div>
<!-- Content 3 -->
<!-- Footer -->
Alles anzeigen