Hallo zusammen,
Ich möchte divs wie folgt positionieren:
html-seminar.de/woltlab/attachment/3300/
Ich hatte immer das Problem, dass der untere Rand von IMG-3 nicht in einer Linie mit IMG-1 ist.
Nun habe ich im Internet eine Möglichkeit gefunden, dass die vier nebeneinanderliegenden Divs gleich hoch sind. Allerdings sind nun IMG-2 und IMG-3 auch nebeneinander und ich schaffe es nicht, dass sie untereinander richtig positioniert sind.
html-seminar.de/woltlab/attachment/3301/
Code
<style>
#flex-container {
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.img-panel {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 20%;
padding: 10px;
float: left;
border: 1px solid #aaa;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div id="flex-container" >
<div class="img-panel"> <img src="../images/img-1.jpg" alt=""> </div>
<div class="img-panel">
<div class="col-img"><img src="../images/img-2.jpg" alt=""></div>
<div class="col-img"><img src="../images/img-3.jpg" alt=""></div>
</div>
<div class="img-panel"> <img src="../images/img-1.jpg" alt=""> </div>
<div class="img-panel">
<div class="col-img"><img src="../images/img-2.jpg" alt=""></div>
<div class="col-img"><img src="../images/img-3.jpg" alt=""></div>
</div>
</div>
</body>Habt ihr einen Tipp für mich?