gpt4 book ai didi

javascript - 自动向左对齐图像网格

转载 作者:行者123 更新时间:2023-11-30 13:57:22 24 4
gpt4 key购买 nike

我已经为我的网页创建了一个图像网格,但问题是它会自动对齐到中心,目前它是这样的:

Image Grid

如您所见,底部的两个图像居中对齐,如何使其向左移动?两个黑条应该在右边。

所以我尝试从 CSS 中删除这一行:

margin:0 auto; /*center aligned*/

不幸的是,它没有用。

这是整个 CSS:

#rig {
max-width:900px;
margin:0 auto; /*center aligned*/
padding:0;
font-size:0; /* Remember to change it back to normal font size if have captions */
list-style:none;
background-color: black;
}
#rig li {
display: inline-block;
*display:inline;/*for IE6 - IE7*/
width:25%;
vertical-align:middle;
box-sizing:border-box;
margin:0;
padding:0;
}

/* The wrapper for each item */
.rig-cell {
/*margin:12px;
box-shadow:0 0 6px rgba(0,0,0,0.3);*/
display:block;
position: relative;
overflow:hidden;
}

/* If have the image layer */
.rig-img {
display:block;
width: 100%;
height: auto;
border:none;
transform:scale(1);
transition:all 1s;
}

#rig li:hover .rig-img {
transform:scale(1.05);
}

/* If have the overlay layer */
.rig-overlay {
position: absolute;
display:block;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #EF4D26;
background-size:50px 50px;
opacity:0;
filter:alpha(opacity=0);/*For IE6 - IE8*/
transition:all 0.6s;
}
#rig li:hover .rig-overlay {
opacity: 0.8;
}

/* If have captions */
.rig-text {
display:block;
padding:0 30px;
box-sizing:border-box;
position:absolute;
left:0;
width:100%;
text-align:center;
text-transform:capitalize;
font-size:20px;
font-weight:bold;
font-family: 'Karla', sans-serif;
font-weight:normal!important;
top:70%;
color:white;
opacity:0;
filter:alpha(opacity=0);/*For older IE*/
transform:translateY(-20px);
transition:all .3s;
}
#rig li:hover .rig-text {
transform:translateY(0px);
opacity: 1;
}

@media (max-width: 9000px) {
#rig li {
width:25%;
}
}

@media (max-width: 700px) {
#rig li {
width:33.33%;
}
}

@media (max-width: 550px) {
#rig li {
width:50%;
}
}
<ul id="rig">
<li>
<a class="rig-cell">
<img class="rig-img" src="https://picsum.photos/200">
<span class="rig-overlay"></span>
<span class="rig-text">Short Description</span>
</a>
</li>
</ul

最佳答案

它远非完美,但也许这会帮助您朝着正确的方向前进。

#rig {
max-width:900px;
margin:0 auto; /*center aligned*/
display: flex;
flex-wrap: wrap;
}

.rig-cell {
position: relative;
flex-basis:25%;
margin:0;
padding:0;
line-height: 0;
overflow: hidden;
}

.rig-img {
max-width: 100%;
height: auto;
border:none;
transform:scale(1);
transition:all 1s;
line-height: 0;
margin: 0;
}

.rig-img:hover {
transform:scale(1.05);
}

.rig-cell::after {
content: "";
width: 100%;
height: 100%;
background: #EF4D26;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition:all 0.6s;
}

.rig-cell:hover::after {
opacity: .8;
}

.rig-cell:hover .rig-text {
bottom: 10%;
opacity: 1;
}


/* If have captions */
.rig-text {
display:block;
padding:0 30px;
line-height: 20px;
box-sizing:border-box;
position:absolute;
left:0;
width:100%;
text-align:center;
text-transform:capitalize;
font-size:20px;
font-weight:bold;
font-family: 'Karla', sans-serif;
font-weight:normal!important;
bottom: 30%;
color:white;
opacity:0;
transform:translateY(-20px);
transition:all .3s;
z-index: 2;
}
<section id="rig">

<a class="rig-cell">
<img class="rig-img" src="https://picsum.photos/200">
<span class="rig-text">Short Description</span>
</a>

<a class="rig-cell">
<img class="rig-img" src="https://picsum.photos/200">
<span class="rig-text">Short Description</span>
</a>

<a class="rig-cell">
<img class="rig-img" src="https://picsum.photos/200">
<span class="rig-text">Short Description</span>
</a>

<a class="rig-cell">
<img class="rig-img" src="https://picsum.photos/200">
<span class="rig-text">Short Description</span>
</a>

<a class="rig-cell">
<img class="rig-img" src="https://picsum.photos/200">
<span class="rig-text">Short Description</span>
</a>

</section>

关于javascript - 自动向左对齐图像网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56992104/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com