[英]How TO - Align Images Side By Side
我正在关注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;
}
您可以尝试如下实现样式:
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>
您可以根据需要调整 %。
正如 Jakub 所说,保持显示设置为 flex,但还要添加
flex-direction: row;
这可能会有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.