我如何将图像彼此相邻放置而不会破裂

Question

I have this PHP code that SELECTS up to 5 data from the mySQL database

<?php
$servername = "localhost";
$username = "kjikk";
$password = "kjkkk";
$dbname = "ujkhjkjl";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT content_url, id FROM posts LIMIT 5";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<img src='http://cdn.bithumor.co/uploads/" . $row["content_url"]. "' width='50%' height='25%'> - Name: " . $row["firstname"]. " " . $row["lastname"]. " ";
    }
} else {
    echo "0 results";
}
$conn->close();
?>

When the 5 posts are echoed, the end up going vertically instead of next to each other and breaking (br tag)after two images are next to each other

Here's what it looks like: http://s9.postimg.org/vao63thr3/Screen_Shot_2015_05_25_at_11_16_03_AM.png

I want two images to be next to each other at the same time before they break to the next two images.

How do I do this?

Answer 1

You could create a div container, and for each image with name, you can wrap them into a div of 50% width from parent with a float: left;

HTML Structure:

<div class="container">
    <div class="half"><img src="..."> Name</div>
    <div class="half"><img src="..."> Name</div>
</div>

PHP:

if ($result->num_rows > 0) {
    // output data of each row
    <div class="parent">
    while($row = $result->fetch_assoc()) {
        echo "<div class='half'><img src='http://cdn.bithumor.co/uploads/" . $row["content_url"]. "'> - Name: " . $row["firstname"]. " " . $row["lastname"]. "</div>";
    }
    echo "</div>";
} 
else {
    echo "0 results";
}

CSS:

.parent {
    width: 1000px; //your desired width
}
.parent .half {
    float: left;
    width: 50%;
}

This way you will ensure always that it's going to be 2 images per row.

Remind: As jeroen said to you, before doing the logic, first try to do the structure the page will have, with it's HTML and CSS only. After that, create the logic and put the structure you will need to it.

Answer 2

Add float:left;

while($row = $result->fetch_assoc()) {
    echo "<div style='float:left;margin-right:5px;'><img src='http://cdn.bithumor.co/uploads/" . $row["content_url"]. "'> - Name: " . $row["firstname"]. " " . $row["lastname"]. "</div>";
}