如何把相鄰的圖像，而無需他們打破

我有一個從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個職位呼應選信號高達5個數據的PHP代碼中，最終會垂直而不是兩個圖像之後彼此相鄰並打破（BR標籤）是彼此相鄰

這裏是什麼樣子：http://s9.postimg.org/vao63thr3/Screen_Shot_2015_05_25_at_11_16_03_AM.png

我想兩個圖像是在之前的同時彼此相鄰他們打破了接下來的兩個圖像。

我該怎麼做？

來源

2015-05-25 Developer Swag

首先，你需要輸出的HTML結構，你可以一起工作，把名字和圖像塊例如，然後你使用CSS樣式。 – jeroen

也檢查，強制寬度和高度可以扭曲你的圖像！ – Cheshire

您可以創建一個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。之後，創建邏輯並將所需的結構放置到其中。

來源

2015-05-25 15:29:19 Cheshire

添加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>"; 
}

來源

2015-05-25 15:32:06 Prime

如何把相鄰的圖像，而無需他們打破

回答

相關問題