javascript - 图片库中的图片定位
问题描述
我试图保持排行榜/摄影师图像始终位于顶部位置,即使在响应时也是如此。
这是我的代码
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
</div>
</div>
</div>
</body>
</html>
如果您看到一个pexels网站,排行榜始终保持在右上方的相同位置。我可以这样做吗?此外,我js-leaderboard
为这张图片添加了一个类。
解决方案
这可以使用order
的属性来完成flex-items
。我在小屏幕上重新排序了列。
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
order: 3;
}
.row > .column:first-child{
order: 1;
}
.right-top-col{
order: 2;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="column">
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%"></a>
</div>
<div class="right-top-col column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%"></a>
<a href="#"><img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%"></a>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- nginx - Fail2ban Nginx-noscript 错误地禁止 ip
- reactjs - Microsoft Graph API REST 授权流 CORS 错误
- python - 从 crontab 在 virtualenv 中运行 python 方法
- google-analytics - 我可以在不设置“数据流”的情况下使用 Google 分析吗?
- qt - x2go / x2godesktopsharing 显示 qt.qpa.xcb:无法连接到显示器 / Mate 桌面
- r - 如何在 rdatatable 的“i”中传递名称向量?
- html - 如何使 div 大小独立于包含文本?
- javascript - 如何使用 blob 对象在 react js 中下载文件,featherjs 如何帮助将 blob 处理为“responseType”?
- angular - Angular Material 表头粘滞:true 不工作
- reactjs - 在 react native 中使用电子邮件和必需的属性电子邮件向 google 注册