Как поместить изображения рядом друг с другом без взлома

Question

У меня есть этот PHP код, выбирающий до 5 данных из базы данных MySql

<?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(); 
?> 

Когда 5 сообщений перекликаются, то в конечном итоге происходит по вертикали а рядом друг с другом и разбивая (бры тэга) после двух изображений рядом друг с другим

Вот как это выглядит: http://s9.postimg.org/vao63thr3/Screen_Shot_2015_05_25_at_11_16_03_AM.png

Я хочу два изображения, чтобы быть рядом друг с другом в то же время до они разбиваются на следующие два изображения.

Как это сделать?

Answer 1

Вы можете создать контейнер div, и для каждого изображения с именем вы можете обернуть их в div с 50% шириной от родителя с помощью float: left;

HTML Структура:

<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%; 
} 

Таким образом, вы обеспечите всегда, что это будет 2 изображения в строке.

Напоминаем: Как сказал вам jeroen, прежде чем делать логику, сначала попробуйте сделать структуру, которую будет иметь страница, с ее HTML и CSS. После этого создайте логику и поместите структуру, которая вам понадобится.

Answer 2

Добавить 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>"; 
}