Tag,
Ein User hat auf seiner Seite Bilder hochgeladen. Jetzt müssen die auch angezeigt werden. Ich habe kurz etwas geschrieben alles funktioniert jedoch scheitert es 3 Bilder in eine Reihe zu kriegen. Es wird immer nur eins pro Reihe angezeigt.
HTML:
Spoiler anzeigen
<?php
try {
if($stmt = $pdo->prepare(
"SELECT
u_post.p_id,
u_post.u_id,
u_post.post,
u_post.image_ordner,
u_post.p_like,
u_post.p_heart,
u_post.date,
user.id,
user.username
FROM u_post
LEFT JOIN user
ON u_post.u_id = user.id
ORDER BY DATE DESC")) {
if(!$stmt->execute()) {
print_r($stmt->errorInfo());
}
while($row = $stmt->fetchObject()) {
$articles[] = $row;
}
}
?>
<?php foreach($articles as $article): ?>
<article id="galerie">
<figure>
<a href="#"><?php echo '<img src="' . $article->image_ordner . '">'; ?></a>
<p class="left_info"><button type="button" class="heart_index"><i class="fa fa-heart-o" aria-hidden="true"></i></button> <a href="#" class="like_detail"><?php echo $article->p_like; ?></a></p>
<p class="right_info"><button type="button" class="comment_index"><i class="fa fa-comment-o" aria-hidden="true"></i></button> <a href="#" class="comment_detail"><?php echo $article->p_like; ?></a></p>
</figure>
<?php endforeach; ?>
<?php } catch(PDOException $err) {
print_r($err->getMessage());
} ?>
</article>
CSS:
Spoiler anzeigen
main #galerie {
width:100%;
margin:0 auto;
text-align:center;
display:flex;
flex-flow: row wrap;
justify-content: space-around;
padding-left:1em;
padding-right:1em;
padding-top:1em;
}
main #galerie figure {
flex-basis: 30%;
flex-grow: 0;
flex-shrink: 1;
padding-bottom:1em;
}
main #galerie img {
width:100%;
height:auto;
}
main #galerie p {
line-height:0;
padding-left:0.688em;
}
main #galerie p.left_info {
display:inline-block;
width:45%;
margin-left:-4px;
vertical-align:middle;
text-align:left;
}
main #galerie p.left_info button {
border:0;
padding:0;
background:#fff;
cursor:pointer;
}
main #galerie p.right_info {
display:inline-block;
width: 50%;
vertical-align:middle;
text-align:right;
}Wie es bei mir aussieht:
Spoiler anzeigen
Wie es bei mir aussieht:
[Blockierte Grafik: http://fs1.directupload.net/images/171129/temp/owzdscjt.png]
Wie es aussehen soll: