Align billeder til bund af en række

Tags:    align button

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???

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

<?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>

<!-- Second Photo Grid-->

<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>


<!-- Pagination -->
<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>

<!-- End page content -->



2 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
kan du ikke lave en online demo og komme med et link ??
har ikke rodet med w3css, med det er nok deri vi skal finde løsningen, ved at overroule en regl
https://www.w3schools.com/w3css/w3css_references.asp
https://www.tutorialspoint.com/w3css/

med en online demo kan vi teste det med udviklingsværktøjet i browseren (F12)


BTW: hvorfor har du overstreget alt din code ??



Det er faktisk denne template jeg har brugt (se link), men problemet opstår når de 8 billeder ikke har samme højde. Hvis de har forskellig højde vil de blive placeret så overkanten af billederne flugter med hinanden, og teksten under de lave billeder vil blive løftet op. Jeg har brug for at underkanten af billederne flugter med hinanden, hvis de har forskellig højde. Så teksten under billederne altid står i samme højde.

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_food_blog&stacked=h




Indlæg senest redigeret d. 12.12.2017 13:58 af Bruger #21938
t