php - 如何将图像并排放置而不破坏它们

Question

我有这段 PHP 代码可以从 mySQL 数据库中选择最多 5 个数据

<?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 个帖子时，最终会垂直移动而不是彼此相邻，并在两个图像彼此相邻后断开(br 标签)

它是这样的:http://s9.postimg.org/vao63thr3/Screen_Shot_2015_05_25_at_11_16_03_AM.png

我希望两张图片在它们断开到下两张图片之前同时彼此相邻。

我该怎么做？

Answer 1

您可以创建一个 div 容器，对于每个带有名称的图像，您可以使用 float: left 将它们包装到父级宽度为 50% 的 div 中；

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。之后，创建逻辑并将您需要的结构放入其中。