如何 - 並排對齊圖像

Question

我正在關注w3schools上的本教程。 我正在創建一個社交網站，我想向用戶展示一個探索頁面，我希望圖像並排排列，可能是 3 或 4 張圖片，然后中斷，然后再顯示 3 或 4 張。現在它完全關閉了。 .

如您所見，它彼此重疊，並且全部位於頁面的右側。 我錯過了什么？ 我希望它准確地顯示它在示例中的外觀。

<div class="row">
<?php

    // output data of each row
    while ($explore_image->fetch()) {

        if ($userLoggedIn != $added_by) {

            if (!empty($image)) {
                echo '<div class="row"><div class="explore_column">';
                echo "<a href='$image'><img src='$image' ></a><p> $added_by $likes </p></br><br><br><br></div></div><br>";
            }
        }
    }
    
    $explore_image->close();
    $con->close();

?>
</div>
* {
box-sizing: border-box;
}

.row {
display: flex;
}

/* Create three equal columns that sits next to each other */
.explore_column {
flex: 100.33%;
padding: 5px;
}

@media screen and (max-width: 500px) {
.explore_column {
width: 100%;
}
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.explore_column {
float: left;
width: 33.33%;
padding: 5px;
}

/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}

Answer 1

您可以嘗試如下實現樣式：

 div { display: flex; flex-wrap: wrap; } img { flex: 1 0 20%; width: 20%; margin: 5px; }

 <div> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/> </div>

---

您可以根據需要調整 %。

Answer 2

正如 Jakub 所說，保持顯示設置為 flex，但還要添加

flex-direction: row;

這可能會有所幫助