Align billeder til bund af en r�kke

Wed, 06 Dec 2017 13:04:33 GMT

Jeg har lavet et galleri hvor billederne p� hver side bliver vist i 2 r�kker af 4 billeder, med nogle info under billedet. Problemet er at n�r billederne ikke har samme h�jde, s� bliver de vist s� det er toppen af dem flugter med hinanden, og ikke bunden og de info der er under billedet. Hvordan f�r jeg dem til at flugte i bunden i stedet for toppen???


<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
<Center><H2>Galleri 1</h2></Center>


<?php if($antal>0) : ?>
<div class="w3-row-padding w3-padding-16 w3-center" id="food">
<div class="w3-quarter">
<img src="../uploads/<?php echo $foto1; ?>" alt="Foto 1" style="width:100%">
<h3>Foto 1<a href="gsletfoto.php?foto=<?php echo $filnavn['1']; ?>"><img src="del.png" alt="Slet" align="right" style="width:30px;height:30px;"></a></h3>
<p><?php echo $dato1; ?><img src="white.png" align="right" style="width:30px;height:30px;"></p>
<hr>
</div>
<?php endif; ?>

<?php if($antal>1) : ?>
<div class="w3-quarter">
<img src="../uploads/<?php echo $foto2; ?>" alt="Foto 2" style="width:100%">
<h3>Foto 2<a href="gsletfoto.php?foto=<?php echo $filnavn['2']; ?>"><img src="del.png" alt="Slet" align="right" style="width:30px;height:30px;"></a></h3>
<p><?php echo $dato2; ?><img src="white.png" align="right" style="width:30px;height:30px;"></p>
<hr>
</div>
<?php endif; ?>

<?php if($antal>2) : ?>
<div class="w3-quarter">
<img src="../uploads/<?php echo $foto3; ?>" alt="Foto 3" style="width:100%">
<h3>Foto 3<a href="gsletfoto.php?foto=<?php echo $filnavn['3']; ?>"><img src="del.png" alt="Slet" align="right" style="width:30px;height:30px;"></a></h3>
<p><?php echo $dato3; ?><img src="white.png" align="right" style="width:30px;height:30px;"></p>
<hr>
</div>
<?php endif; ?>

<?php if($antal>3) : ?>
<div class="w3-quarter">
<img src="../uploads/<?php echo $foto4; ?>" alt="Foto 4" style="width:100%">
<h3>Foto 4<a href="gsletfoto.php?foto=<?php echo $filnavn['4']; ?>"><img src="del.png" alt="Slet" align="right" style="width:30px;height:30px;"></a></h3>
<p><?php echo $dato4; ?><img src="white.png" align="right" style="width:30px;height:30px;"></p>
<hr>
</div>
<?php endif; ?>

</div>



<div class="w3-row-padding w3-padding-16 w3-center">

<?php if($antal>4) : ?>
<div class="w3-quarter">
<img src="../uploads/<?php echo $foto5; ?>" alt="Foto 5" style="width:100%">
<h3><Center>Foto 5<a href="gsletfoto.php?foto=<?php echo $filnavn['5']; ?>"><img src="del.png" alt="Slet" align="right" style="width:30px;height:30px;"></a></Center></h3>
<p><?php echo $dato5; ?><img src="white.png" align="right" style="width:30px;height:30px;"></p>
<hr>
</div>
<?php endif; ?>

<?php if($antal>5) : ?>
<div class="w3-quarter">
<img src="../uploads/<?php echo $foto6; ?>" alt="Foto 6" style="width:100%">
<h3>Foto 6<a href="gsletfoto.php?foto=<?php echo $filnavn['6']; ?>"><img src="del.png" alt="Slet" align="right" style="width:30px;height:30px;"></a></h3>
<p><?php echo $dato6; ?><img src="white.png" align="right" style="width:30px;height:30px;"></p>
</div>
<?php endif; ?>

<?php if($antal>6) : ?>
<div class="w3-quarter">
<img src="../uploads/<?php echo $foto7; ?>" alt="Foto 7" style="width:100%">
<h3>Foto 7<a href="gsletfoto.php?foto=<?php echo $filnavn['7']; ?>"><img src="del.png" alt="Slet" align="right" style="width:30px;height:30px;"></a></h3>
<p><?php echo $dato7; ?><img src="white.png" align="right" style="width:30px;height:30px;"></p>
<hr>
</div>
<?php endif; ?>

<?php if($antal>7) : ?>
<div class="w3-quarter">
<img src="../uploads/<?php echo $foto8; ?>" alt="Foto 8" style="width:100%">
<h3>Foto 8<a href="gsletfoto.php?foto=<?php echo $filnavn['8']; ?>"><img src="del.png" alt="Slet" align="right" style="width:30px;height:30px;"></a></h3>
<p><?php echo $dato8; ?><img src="white.png" align="right" style="width:30px;height:30px;"></p>
<hr>
</div>
<?php endif; ?>

</div>


<div class="w3-center w3-padding-32">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-black">�</a>
<?php if($antal>1) : ?>
<a href="../g1.php" class="w3-bar-item w3-black w3-button">1</a>
<?php endif; ?>
<?php if($antal>8) : ?>
<a href="../g2.php" class="w3-bar-item w3-button w3-hover-black">2</a>
<?php endif; ?>
<?php if($antal>16) : ?>
<a href="../g3.php" class="w3-bar-item w3-button w3-hover-black">3</a>
<?php endif; ?>
<?php if($antal>24) : ?>
<a href="../g4.php" class="w3-bar-item w3-button w3-hover-black">4</a>
<?php endif; ?>
<?php if($antal>32) : ?>
<a href="../g5.php" class="w3-bar-item w3-button w3-hover-black">�</a>
<?php endif; ?>
</div>
</div>

Udvikleren.dk - Seneste [align] forum tr�de

Align billeder til bund af en r�kke