html - 如何 - 并排对齐图像

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>

您可以根据需要调整 %。