Hallo,
ich habe folgende Frage:
Ich habe 2 Div-Elemente mit display:flex auf gleiche Höhe gebracht.
Nun möchte ich aber innerhalb dieser zwei, nennen wir sie Haupt-Divs, weitere divs einfügen z. B. Bildergalarie ect. Diese sollten aber vertikal auf der gleichen Höhe sein. Hier ein Bild:
[Blockierte Grafik: http://250kb.de/u/160624/j/5qvuoUwrA5NV.jpg]
kann ich sagen, der rote div ist die basislinie und der schwarze soll auf die selbe höhe kommen bzw. eben dort anfangen?
Der schwarze Div im rechten Div, soll auf die gleiche Höhe wie der rote Div kommen, dass es ordentlicher aussieht.
Die Frage ist, kann ich denn innerhalb von 2 flex divs, eine solche Anordnung machen, oder muss ich jetzt mehrere display-flex divs untereinander anlegen?
Hier mein Code:
<!---------- Ausziehtechnik start ------------------>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="col-xs-12 row-m">
<div class="display-flex">
<!---------------------------->
<div class="margin-first display-flex pad-r col-xs-12 col-sm-6">
<div style="width:100%;" class="basic-box">
<h1>Lackschadenfreie Ausbeultechnik</h1>
<p>
adshdahsd jkask asgkdsag aks dgadg ashdg ah dgasgashkg dahka gs kasg ahkgd ahkgd asgd haksg dasdg ahsd ghasg ashg das
</p>
<div style="background:red;" class="display-flex">
hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd <br><br>hhh dasd sd hhh dasd sd
hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd <br><br>hhh dasd sd hhh dasd sd
</div>
<hr>
<p>
Wir beseitigen Dellen ohne Lackierung. Bereits seit Jahren wenden wir diese Art des Ausbeulens
bei Parkschaden und Hagelschäden erfolgreich an.
Durch Hebeln mit speziellen Werkzeugen werden Dellen ohne Beschädigung des Lacks entfernt.
Diese Technik wird besonders bei Hagelschäden angewandt.
</p>
<p>
<b>Anwendungsgebiete:</b><br>
Leichter Karosserieschaden • Hagel bzw. Unwetterschäden • Ein und Ausparkschaden • Leichte Unfallschäden.
</p>
</div>
</div>
<!---------------------------->
<div style="" class="margin-first display-flex pad-l col-xs-12 col-sm-6">
<div style="width:100%;" class="basic-box">
<h1>Ausziehtechnik</h1>
<div style="background:black; color: #fff;" class="display-flex">
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd <br><br>hhh dasd sd hhh dasd sd
hhhhhhhhhhhhhhhhhhhhhhhhh dasd sd <br><br>hhh dasd sd hhh dasd sd
</div>
<hr>
<p>
Teile-Instandsetzung ohne Neuteilbeschaffung. Diese Technik ist eine innovative Reparatur-Methode im Bereich
der Karosserieinstandsetzung. Durch Hebeln mit der Zugbrücke lassen sich Dellen kontrolliert und zielgenau
rückverformen. Anschliessend wird das reparierte Teil lackiert.
</p>
<p>
<b>Unsere Leistung:</b><br>
Karosserieschäden jeglicher Art • Innovative Reparatur-Methode!
</p>
</div>
</div>
</div>
</div>
Alles anzeigen
und der css:
.display-flex{display:flex;}
@media only screen and (min-width: 768px) and (max-width: 992px){
.img-container {padding:0px 15px 5px 0px; margin:0px;}
.block-container{margin-bottom:15px;}
.display-flex{display:flex;}}
@media only screen and (max-width: 768px){
.display-flex{display:block;}}
Alles anzeigen